Skip to content

S
szse
Commit babe5f83 by zhaochengxiang
Options

去掉资产地图

parent ae34e146
Showing with 0 additions and 5752 deletions
src/App.js
...@@ -8,7 +8,6 @@ import { ContextPath } from './util'; ...@@ -8,7 +8,6 @@ import { ContextPath } from './util';
import Signin from './view/Signin'; import Signin from './view/Signin';
import Home from './view/Home'; import Home from './view/Home';
import Manage from './view/Manage'; import Manage from './view/Manage';
import Map from './view/Manage/Map';
import Model from './view/Manage/Model'; import Model from './view/Manage/Model';
import ModelConfig from './view/Manage/ModelConfig'; import ModelConfig from './view/Manage/ModelConfig';
import AssetManage from './view/Manage/AssetManage'; import AssetManage from './view/Manage/AssetManage';
...@@ -115,7 +114,6 @@ export class App extends React.Component { ...@@ -115,7 +114,6 @@ export class App extends React.Component {
<Route path={'/center-home/view/datasource-manage'} component={DatasourceManage} exact /> <Route path={'/center-home/view/datasource-manage'} component={DatasourceManage} exact />
<Route path={'/center-home/view/data-model'} component={Model} exact /> <Route path={'/center-home/view/data-model'} component={Model} exact />
<Route path={'/center-home/view/model-config'} component={ModelConfig} exact /> <Route path={'/center-home/view/model-config'} component={ModelConfig} exact />
<Route path={'/center-home/view/asset-map'} component={Map} exact />
<Route path={'/center-home/view/asset-manage'} component={AssetManage} exact /> <Route path={'/center-home/view/asset-manage'} component={AssetManage} exact />
<Route path={'/center-home/view/asset-resource-browse'} component={AssetResourceBrowse} exact /> <Route path={'/center-home/view/asset-resource-browse'} component={AssetResourceBrowse} exact />
<Route path={'/center-home/view/asset-browse'} component={AssetBrowse} exact /> <Route path={'/center-home/view/asset-browse'} component={AssetBrowse} exact />
...@@ -124,7 +122,6 @@ export class App extends React.Component { ...@@ -124,7 +122,6 @@ export class App extends React.Component {
<Route path={'/center-home/menu/datasource-manage'} component={DatasourceManage} exact /> <Route path={'/center-home/menu/datasource-manage'} component={DatasourceManage} exact />
<Route path={'/center-home/menu/data-model'} component={Model} exact /> <Route path={'/center-home/menu/data-model'} component={Model} exact />
<Route path={'/center-home/menu/model-config'} component={ModelConfig} exact /> <Route path={'/center-home/menu/model-config'} component={ModelConfig} exact />
<Route path={'/center-home/menu/asset-map'} component={Map} exact />
<Route path={'/center-home/menu/asset-manage'} component={AssetManage} exact /> <Route path={'/center-home/menu/asset-manage'} component={AssetManage} exact />
<Route path={'/center-home/menu/asset-resource-browse'} component={AssetResourceBrowse} exact /> <Route path={'/center-home/menu/asset-resource-browse'} component={AssetResourceBrowse} exact />
<Route path={'/center-home/menu/asset-browse'} component={AssetBrowse} exact /> <Route path={'/center-home/menu/asset-browse'} component={AssetBrowse} exact />
......
src/routes.js
...@@ -24,10 +24,6 @@ export const routes = [ ...@@ -24,10 +24,6 @@ export const routes = [
text: '模型配置', text: '模型配置',
}, },
{ {
name: 'asset-map',
text: '资产地图',
},
{
name: 'asset-manage', name: 'asset-manage',
text: '资产管理', text: '资产管理',
}, },
......
src/view/Manage/Map/Component/Bar.jsx deleted 100644 → 0
import React from 'react';
import { Chart } from '@antv/g2';
class Bar extends React.Component {
componentDidMount() {
const { data, type } = this.props;
setTimeout(() => {
const chart = new Chart({
container: `bar${type||''}`,
autoFit: true,
});
chart.data(data);
chart.scale('value', {
nice: true,
});
chart.tooltip({
showMarkers: false
});
chart.interaction('active-region');
chart.interval().position('name*value');
chart.render();
}, 100);
}
render() {
const { type } = this.props;
return (
<div id={`bar${type||''}`} style={{ width: '100%', height: 150 }}></div>
)
}
}
export default Bar;
\ No newline at end of file
src/view/Manage/Map/Component/HorizontalBar.jsx deleted 100644 → 0
import React from 'react';
import { Chart } from '@antv/g2';
class HorizontalBar extends React.Component {
componentDidMount() {
const { data, type } = this.props;
setTimeout(() => {
const chart = new Chart({
container: `horizontal-bar${type||''}`,
autoFit: true,
});
chart.data(data);
chart.scale('value', { nice: true });
chart.coordinate().transpose();
chart.tooltip({
showMarkers: false
});
chart.interaction('active-region');
chart.interval().position('name*value');
chart.render();
}, 100);
}
render() {
const { type } = this.props;
return (
<div id={`horizontal-bar${type||''}`} style={{ width: '100%', height: 350 }}></div>
)
}
}
export default HorizontalBar;
\ No newline at end of file
src/view/Manage/Map/Component/Org.jsx deleted 100644 → 0
import React from 'react';
import G6 from '@antv/g6';
const globalFontSize = 20;
const maxTextWidth = 160;
class Org extends React.Component {
componentDidUpdate(prevProps, prevState) {
const { childData, parentNodeId, data } = this.props;
if (parentNodeId && parentNodeId!== prevProps.parentNodeId) {
const parentData = this.graph?.findDataById(parentNodeId);
if (!parentData.children) {
parentData.children = [];
}
parentData.children = parentData.children.filter(item => item.dbType!=='More');
parentData.children = [...parentData.children, ...childData];
this.graph?.changeData();
this.graph?.updateItem(this.graph?.findById(parentNodeId), {
collapsed: false,
});
} else if (data && data !== prevProps.data && parentNodeId===null) {
this.graph?.destroy();
this.graph = init(this)(this.elem, this.props.data);
}
}
graph = undefined
elem = undefined
render() {
const { styles } = this.props;
return (
<div ref={ref => this.elem = ref} style={styles} />
);
}
}
export default Org;
const init = (ctx) => function (container, data) {
const width = container.scrollWidth;
const height = container.scrollHeight;
const tooltip = new G6.Tooltip({
offsetX: 10,
offsetY: 10,
// the types of items that allow the tooltip show up
// 允许出现 tooltip 的 item 类型
itemTypes: ['node'],
// custom the tooltip's content
// 自定义 tooltip 内容
getContent: (e) => {
const outDiv = document.createElement('div');
outDiv.style.width = 'fit-content';
//outDiv.style.padding = '0px 0px 20px 0px';
outDiv.innerHTML = `
<h4>${e.item.getModel().text||''}</h4>
`;
return outDiv;
},
});
var graph = new G6.TreeGraph({
container,
width,
height,
linkCenter: true,
maxZoom: 1,
plugins: [tooltip],
modes: {
default: [
{
type: 'collapse-expand',
onChange: function onChange(item, collapsed) {
const data = item.get('model');
graph.updateItem(item, {
collapsed,
});
data.collapsed = collapsed;
return true;
},
},
'drag-canvas',
'zoom-canvas',
],
},
defaultNode: {
size: 26,
anchorPoints: [
[0, 0.5],
[1, 0.5],
],
},
defaultEdge: {
type: 'cubic-vertical',
size: 2,
color: '#e2e2e2',
},
layout: {
type: 'compactBox',
direction: 'TB',
getId: function getId(d) {
return d.id;
},
getVGap: function getVGap() {
return 200;
},
getHGap: function getHGap() {
return 40;
},
},
});
const fittingString = (str, maxWidth, fontSize) => {
const ellipsis = '...';
const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
let currentWidth = 0;
let res = str;
const pattern = new RegExp('[\u4E00-\u9FA5]+'); // distinguish the Chinese charactors and letters
str.split('').forEach((letter, i) => {
if (currentWidth > maxWidth - ellipsisLength) return;
if (pattern.test(letter)) {
// Chinese charactors
currentWidth += fontSize;
} else {
// get the width of single letter according to the fontSize
currentWidth += G6.Util.getLetterWidth(letter, fontSize);
}
if (currentWidth > maxWidth - ellipsisLength) {
res = `${str.substr(0, i)}${ellipsis}`;
}
});
return res;
};
graph.node(function (node) {
return {
style: {
fill: (node.dbType==='Dir'||node.dbType==='More')?'#0069AC':'#fff',
stroke: '#096dd9'
},
label: fittingString(node.text||'', maxTextWidth, globalFontSize),
labelCfg: {
position: 'bottom',
offset: 5,
style: {
rotate: 0,
textAlign: 'center',
},
},
};
});
graph.data(data);
graph.render();
graph.fitView();
graph.on('node:click', function (e) {
const node = e.item;
const nodeId = node.get('id');
const model = node.getModel();
if (model.dbType==='Dir') {
const children = model.children;
if (!children ) {
ctx.props?.loadSubLeafData(model.dirId||'', nodeId);
}
} else if (model.dbType === 'Table') {
ctx.props?.onAssetClick(model.tid);
} else if (model.dbType === 'More') {
ctx.props?.loadMoreLeafData(model.pDirId, model.pid, model.index);
}
});
if (typeof window !== 'undefined') {
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.changeSize(container.scrollWidth, container.scrollHeight);
};
}
return graph;
}
src/view/Manage/Map/Component/Relation.css deleted 100644 → 0
#left-control-container {
opacity: .5;
position: absolute;
top: 50%;
left: 20px;
width: 400px;
height: 620px;
margin-top: -310px;
background-image: url(./assets/border-left.0932.png);
background-size: cover;
background-position: 0;
-webkit-animation: leftflyin 1s;
animation: leftflyin 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
pointer-events: none;
}
@-webkit-keyframes leftflyin {
0% {
transform: translate3d(-999px,0,0) scale3d(10,10,1)
}
to {
transform: translateZ(0) scaleX(1)
}
}
@keyframes leftflyin {
0% {
transform: translate3d(-999px,0,0) scale3d(10,10,1)
}
to {
transform: translateZ(0) scaleX(1)
}
}
#right-control-container {
opacity: .5;
position: absolute;
top: 50%;
right: 20px;
width: 400px;
height: 620px;
margin-top: -310px;
background-image: url(./assets/border-right.61f0.png);
background-size: cover;
background-position: 100%;
-webkit-animation: rightflyin 1s;
animation: rightflyin 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
pointer-events: none
}
@-webkit-keyframes rightflyin {
0% {
transform: translate3d(999px,0,0) scale3d(10,10,1)
}
to {
transform: translateZ(0) scaleX(1)
}
}
@keyframes rightflyin {
0% {
transform: translate3d(999px,0,0) scale3d(10,10,1)
}
to {
transform: translateZ(0) scaleX(1)
}
}
#top-bg-container {
top: -120px;
height: 240px;
/* background-image: url(https://static.allhistory.com/online/common/img/top-bg.7c77.png); */
background-size: 100% 240px
}
#bottom-bg-container,#top-bg-container {
position: absolute;
width: 100%;
-webkit-animation: bottomfadein 1s 1s;
animation: bottomfadein 1s 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
pointer-events: none
}
#bottom-bg-container {
bottom: 0;
height: 289px;
background-image: url(./assets/bottom-bg.8d9e.png);
background-size: cover;
background-position: top
}
@-webkit-keyframes bottomfadein {
0% {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes bottomfadein {
0% {
opacity: 0
}
to {
opacity: 1
}
}
\ No newline at end of file
src/view/Manage/Map/Component/Relation.jsx deleted 100644 → 0
import React from 'react';
import G6 from '@antv/g6';
import circle from './circle.93e1.png'
import node from './node-bg-select.171e.png'
import './Relation.css'
import { EXPAND_ICON } from './Relation1';
const colors = [
'#BDD2FD',
'#C2C8D5',
'#FBE5A2',
'#F6C3B7',
'#B6E3F5',
'#D3C6EA',
'#FFD8B8',
'#AAD8D8',
'#FFD6E7',
];
const highlight = '#ff7800'
class Relation extends React.Component {
componentDidMount() {
// console.debug(this.props?.data)
}
componentDidUpdate(prevProps, _prevState) {
const { childData, parentNodeId } = this.props;
if (parentNodeId && parentNodeId !== prevProps.parentNodeId) {
const parentData = this.graph?.findDataById(parentNodeId);
if (!parentData.children) {
parentData.children = [];
}
parentData.children = parentData.children.filter(item => item.dbType!=='More');
parentData.children = [...parentData.children, ...childData];
this.graph?.changeData();
this.graph?.fitView();
} else if (this.props.data) {
this.graph?.destroy();
this.graph = init(this)(this.elem, this.props.data)
}
}
graph = undefined
elem = undefined
render() {
const { styles } = this.props;
return (
<React.Fragment>
<div ref={ref => this.elem = ref} style={styles}>
</div>
</React.Fragment>
);
}
}
export default Relation;
let depthCount = {}
function countDepth(node, _depth = 0) {
// node.text = "测试123567890"
const depth = _depth + 1
if (node.children) {
let count = undefined
for (const child of node.children) {
if (count === undefined) {
count = (depthCount[depth] ?? 0)
}
count += 1
countDepth(child, depth)
}
depthCount[depth] = count
}
}
const init = (ctx) => function (container, data) {
depthCount = {}
countDepth(data)
// console.debug(depthCount)
// const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new G6.TreeGraph({
animate: false,
container,
width,
height,
linkCenter: true,
modes: {
default: [
// {
// type: 'collapse-expand',
// onChange: function onChange(item, collapsed) {
// const data = item.get('model');
// data.collapsed = collapsed;
// return true;
// },
// },
'drag-canvas',
'zoom-canvas',
'drag-node'
],
},
defaultNode: {
type: 'real-node',
size: 12,
},
nodeStateStyles: {
hover: {}, // 清除预设hover效果
},
defaultEdge: {
type: 'custom-line',
},
layout: {
type: 'dendrogram',
direction: 'V',
nodeSep: 25,
rankSep: 100,
// radial: true,
},
});
graph.node(function (node) {
return {
label: formatText(node.text ?? ''),
};
});
graph.data(data);
graph.render();
graph.fitView();
graph.on('node:mouseenter', (evt) => {
const { item } = evt;
const model = item.getModel();
graph.setItemState(item, 'hover', true);
item.toFront();
item.update({
label: model.text,
});
});
graph.on('node:mouseleave', (evt) => {
const { item } = evt;
const model = item.getModel();
graph.setItemState(item, 'hover', false);
item.update({
label: formatText(model.text),
});
});
graph.on('edge:mouseenter', (evt) => {
const { item } = evt;
graph.setItemState(item, 'active', true);
});
graph.on('edge:mouseleave', (evt) => {
const { item } = evt;
graph.setItemState(item, 'active', false);
});
// click node to show the detail drawer
graph.on('node:click', (evt) => {
const focusNodes = graph.findAllByState('node', 'focus');
focusNodes.forEach((fnode) => {
graph.setItemState(fnode, 'focus', false); // false
});
const { item } = evt;
graph.setItemState(item, 'focus', true);
graph.setItemState(item, 'hover', false);
const model = item.getModel();
const nodeId = item.get('id');
if (model.dbType==='Dir') {
const children = model.children;
if (!children) {
ctx.props?.loadSubLeafData(model.dirId||'', nodeId);
}
} else if (model.dbType === 'Table') {
ctx.props?.onAssetClick(model.tid);
} else if (model.dbType === 'More') {
ctx.props?.loadMoreLeafData(model.pDirId, model.pid, model.index);
}
});
if (typeof window !== 'undefined')
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.changeSize(container.scrollWidth, container.scrollHeight);
};
return graph
}
G6.registerNode(
'real-node',
{
draw(cfg, group) {
// console.debug(cfg)
let r = 10, width1 = 0, width2 = 0, lineWidth = 0
if (depthCount[cfg.depth] > 10) {
r = 6
}
width1 = r * 2.5
width2 = r * 4
// if (cfg.depth === 0) {
// root = cfg
// }
// if (depthCount[cfg.depth] > 10) {
group.addShape('image', {
attrs: {
x: -width1 / 2,
y: -width1 / 2,
width: width1,
height: width1,
img: circle,
},
name: 'halo-shape',
visible: false,
});
// }
// if (depthCount[cfg.depth] > 10) {
group.addShape('image', {
attrs: {
x: -width2 / 2,
y: -width2 / 2,
width: width2,
height: width2,
img: node,
},
name: 'focus-shape',
visible: false,
});
lineWidth = .8
// }
const keyShape = group.addShape('circle', {
attrs: {
x: 0,
y: 0,
r,
fill: colors[cfg.depth % colors.length],
stroke: highlight,
lineWidth,
cursor: (cfg.dbType==='Dir'||cfg.dbType==='More')?'pointer':'default',
},
name: 'aggregated-node-keyShape',
});
if (cfg.label) {
const text = cfg.label;
let refY = 0;
let offsetY = 0;
const lineNum = cfg.labelLineNum || 1;
const fontSize = 6
offsetY = lineNum * (fontSize || 12);
let [x, y] = [0, r + refY + offsetY + 5]
// if (depthCount[cfg.depth] > 10) {
// [x, y] = textXY(root, cfg)
// }
group.addShape('text', {
attrs: {
text,
x, y,
textAlign: 'center',
textBaseLine: 'alphabetic',
cursor: 'pointer',
fontSize,
fill: '#000',
opacity: 0.85,
fontWeight: 400,
// stroke: global.edge.labelCfg.style.stroke,
},
name: 'text-shape',
className: 'text-shape',
});
}
const bbox = keyShape.getBBox()
if (cfg.dbType === 'Dir') {
if (!cfg.children) {
const marker = group.addShape('marker', {
attrs: {
x: 0,
y: 0,
r: 3,
symbol: EXPAND_ICON,
stroke: '#73d13d',
lineWidth: .7,
cursor: 'pointer',
},
name: 'add-item',
});
const mbbox = marker.getBBox()
// console.debug(bbox, mbbox)
marker.moveTo(bbox.maxX + mbbox.width/2, bbox.minY + mbbox.height)
}
// else if (cfg?.children?.length > 10) {
// group.addShape('marker', {
// attrs: {
// x: bbox.maxX + 8,
// y: bbox.height >> 1,
// r: 6,
// symbol: cfg.collapsed ? EXPAND_ICON : COLLAPSE_ICON,
// stroke: cfg.collapsed ? '#73d13d' : '#ff4d4f',
// lineWidth: 2,
// }
// });
// }
}
return keyShape;
},
setState: (name, value, item) => {
const group = item.get('group');
if (name === 'hover') {
if (item.hasState('focus')) {
return;
}
const halo = group.find((e) => e.get('name') === 'halo-shape');
if (value) {
// halo && halo.resumeAnimate()
halo && halo.show();
let scale = 1
halo && halo.animate(
(ratio) => {
scale = 2 - ratio
},
{
repeat: false,
duration: 500,
easing: 'easeCubicOut',
},
);
halo && halo.animate(
(ratio) => {
// console.debug('scale', scale)
const toMatrix = G6.Util.transform(
[1, 0, 0, 0, 1, 0, 0, 0, 1],
[['r', ratio * Math.PI * 2], ['s', scale, scale]],
);
return {
matrix: toMatrix,
};
},
{
repeat: true,
duration: 2000,
easing: 'easeLinear',
},
);
} else {
halo && halo.stopAnimate()
halo && halo.hide();
}
} else if (name === 'focus') {
const focus = group.find((e) => e.get('name') === 'focus-shape');
if (value) {
focus && focus.show();
} else {
focus && focus.hide();
}
// 将相关边也高亮
// const relatedEdges = item.getEdges();
// relatedEdges.forEach((edge) => {
// edge.setState('focus', value);
// });
}
},
update: undefined,
},
'aggregated-node',
); // 这样可以继承 aggregated-node 的 setState
// const lineDash = [4, 2, 1, 2];
G6.registerEdge(
'custom-line',
{
draw(cfg, group) {
const startPoint = cfg.startPoint;
const endPoint = cfg.endPoint;
const dx = endPoint.x - startPoint.x, dy = endPoint.y - startPoint.y, dst = Math.sqrt(dx * dx + dy * dy)
const px = dst > 30 ? 10 * dx / dst : 0, py = dst > 30 ? 10 * dy / dst : 0
const shape = group.addShape('path', { // 自定义连线
attrs: {
stroke: '#aaa',
lineWidth: .5,
path: [
['M', startPoint.x + px, startPoint.y + py],
['L', endPoint.x - px, endPoint.y - py],
],
},
// must be assigned in G6 3.3 and later versions. it can be any value you want
name: 'path-shape',
});
const midPoint = shape.getPoint(0.5);
const rad = Math.acos(dx / dst)
const radius = dy < 0 ? -rad : rad
const rw = 20, rh = 6
{
const rect = group.addShape('rect', { // 文字的底框
attrs: {
width: rw,
height: rh,
fill: '#fff',
radius: 2,
// x and y should be minus width / 2 and height / 2 respectively to translate the center of the rect to the midPoint
// x 和 y 分别减去 width / 2 与 height / 2，使矩形中心在 midPoint 上
},
name: 'rect',
visible: false
});
const toMatrix = G6.Util.transform(
[1, 0, 0, 0, 1, 0, 0, 0, 1],
[['t', -rw >> 1, -rh >> 1], ['r', dy < 0 ? -rad : rad], ['t', midPoint.x, midPoint.y]],
);
rect.setMatrix(toMatrix)
}
{
const text = group.addShape('text', { // 文字
attrs: {
text: '关系',
textAlign: 'center',
fontSize: 4,
fill: '#000',
opacity: 0.85
},
name: 'text',
visible: false
})
const bbox = text.getBBox()
text.moveTo(midPoint.x, midPoint.y + (bbox.height >> 1))
text.rotateAtPoint(midPoint.x, midPoint.y, rad > Math.PI * .5 ? radius + Math.PI : radius)
}
// {
// const arrow = group.addShape('marker', {
// attrs: {
// x: 0,
// y: 0,
// r: 2,
// fill: '#fff',
// symbol: 'triangle',
// },
// // must be assigned in G6 3.3 and later versions. it can be any value you want
// name: 'marker-shape',
// });
// const x = midPoint.x + ((rw >> 1) + 2.5) * dx / dst, y = midPoint.y + ((rw >> 1) + 2.5) * dy / dst
// arrow.moveTo(x, y)
// arrow.rotateAtPoint(x, y, radius + Math.PI * .5)
// }
return group;
},
// afterDraw: (cfg, group) => {
// },
setState: (name, value, item) => {
if (name === 'active') {
const keyShape = item.get('keyShape').get('children')[0];
// const rect = item.get('keyShape').get('children')[1];
// const text = item.get('keyShape').get('children')[2];
if (value) {
keyShape.attr('stroke', highlight);
// rect.show()
// text.show()
} else {
keyShape.attr('stroke', '#aaa');
// rect.hide()
// text.hide()
}
}
// if (name === 'focus') {
// const keyShape = item.get('keyShape');
// if (value) {
// if (keyShape.cfg.animating) {
// return
// }
// // const length = keyShape.getTotalLength();
// // To fix stopAnimate not immediately bug
// window.setTimeout(() => {
// keyShape.animate(
// (ratio) => {
// // the operations in each frame. Ratio ranges from 0 to 1 indicating the prograss of the animation. Returns the modified configurations
// // const startLen = ratio * length;
// // Calculate the lineDash
// const cfg = {
// // lineDash: [startLen, length - startLen],
// lineDash,
// lineDashOffset: - Math.floor(ratio * 10),
// };
// return cfg;
// },
// {
// repeat: true, // Whether executes the animation repeatly
// duration: 1000, // the duration for executing once
// },
// );
// }, 100)
// } else {
// keyShape.stopAnimate();
// keyShape.attr('lineDash', null)
// }
// }
}
},
// 'single-edge',
)
// 截断长文本。length 为文本截断后长度，elipsis 是后缀
const formatText = (text, length = 5, elipsis = '...') => {
if (!text) return '';
if (text.length > length) {
return `${text.substr(0, length)}${elipsis}`;
}
return text;
};
// function textXY(root, cfg) {
// const txtWidth = cfg.label.length > 5 ? 24 : cfg.label.length * 4
// const { x, y } = cfg
// const _y = y - root.y, _x = x - root.x
// const angle = Math.atan2(_y, _x)
// const sinAngle = Math.sin(angle), cosAngle = Math.cos(angle)
// const radX = 4 + txtWidth
// const radY = Math.abs(Math.pow(sinAngle, Math.abs(Math.round(sinAngle * 50)))) * 10 //Math.pow(Math.E, 80 * Math.log(Math.abs(sinAngle))) * 40
// return [
// // 右侧文字(中间向右侧15px,上下部向左靠20px) : 左侧
// radX * cosAngle,
// radY * sinAngle + (sinAngle > 0 ? sinAngle * 20 : sinAngle * 10)
// ];
// }
src/view/Manage/Map/Component/Relation1.jsx deleted 100644 → 0
import React from 'react';
import G6 from '@antv/g6';
import circle from './circle.93e1.png'
import node from './node-bg-select.171e.png'
const colors = [
'#BDD2FD',
'#C2C8D5',
'#FBE5A2',
'#F6C3B7',
'#B6E3F5',
'#D3C6EA',
'#FFD8B8',
'#AAD8D8',
'#FFD6E7',
];
export const COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) {
return [
['M', x - r, y - r],
['a', r, r, 0, 1, 0, r * 2, 0],
['a', r, r, 0, 1, 0, -r * 2, 0],
['M', x + 2 - r, y - r],
['L', x + r - 2, y - r],
];
};
export const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
return [
['M', x - r, y - r],
['a', r, r, 0, 1, 0, r * 2, 0],
['a', r, r, 0, 1, 0, -r * 2, 0],
['M', x + 2 - r, y - r],
['L', x + r - 2, y - r],
['M', x, y - 2 * r + 2],
['L', x, y - 2],
];
};
const globalFontSize = 12;
let graph = null;
class Relation extends React.Component {
componentDidMount() {
const { type, loadMoreData } = this.props;
const container = document.getElementById(`container${type || ''}`);
if (!container) return;
const width = container.scrollWidth || 500;
const height = container.scrollHeight || 500;
console.debug(container.scrollWidth)
const tooltip = new G6.Tooltip({
offsetX: 10,
offsetY: 10,
// the types of items that allow the tooltip show up
// 允许出现 tooltip 的 item 类型
itemTypes: ['node'],
// custom the tooltip's content
// 自定义 tooltip 内容
getContent: (e) => {
const outDiv = document.createElement('div');
outDiv.style.width = 'fit-content';
//outDiv.style.padding = '0px 0px 20px 0px';
outDiv.innerHTML = `
<h4>${e.item.getModel().text || ''}</h4>
`;
return outDiv;
},
});
graph = new G6.TreeGraph({
container: `container${type || ''}`, animate: false,
width,
height,
plugins: [tooltip],
// linkCenter: true,
maxZoom: 1,
modes: {
default: [
{
type: 'collapse-expand',
onChange: function onChange(item, collapsed) {
const data = item.get('model');
graph.updateItem(item, {
collapsed,
});
data.collapsed = collapsed;
return true;
},
},
'drag-canvas',
'zoom-canvas',
],
},
layout: {
type: 'dendrogram',
direction: 'RL',
getId: function getId(d) {
return d.id;
},
getVGap: () => {
return 20;
},
getHGap: () => {
return 40;
},
radial: true,
},
defaultNode: {
type: 'relation-node',
anchorPoints: [
[0, 0.5],
[1, 0.5],
],
},
defaultEdge: {
// type: 'cubic-horizontal',
size: 2,
color: '#e2e2e2',
},
});
const fittingString = (str, maxWidth, fontSize) => {
const ellipsis = '...';
const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
let currentWidth = 0;
let res = str;
const pattern = new RegExp('[\u4E00-\u9FA5]+'); // distinguish the Chinese charactors and letters
str.split('').forEach((letter, i) => {
if (currentWidth > maxWidth - ellipsisLength) return;
if (pattern.test(letter)) {
// Chinese charactors
currentWidth += fontSize;
} else {
// get the width of single letter according to the fontSize
currentWidth += G6.Util.getLetterWidth(letter, fontSize);
}
if (currentWidth > maxWidth - ellipsisLength) {
res = `${str.substr(0, i)}${ellipsis}`;
}
});
return res;
};
graph.node(function (node) {
return {
label: fittingString(node.text || '', node.size - 32, globalFontSize),
};
});
this.layoutGraph();
graph.on('node:click', function (e) {
const node = e.item;
const nodeId = node.get('id');
const model = node.getModel();
if (model.dbType === 'Dir') {
const children = model.children;
if (!children && loadMoreData) {
loadMoreData(model.dirId || '', nodeId);
}
} else if (model.dbType !== 'Root') {
//通过资产id跳转到资产详情页
// history && history.push(`${ContextPath}/home`);
}
});
if (typeof window !== 'undefined') {
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.changeSize(container.scrollWidth, container.scrollHeight);
};
}
}
layoutGraph = () => {
const { data } = this.props;
if (graph && data) {
function recursionTreeData(treeData, depth) {
if ((treeData || []).length === 0) return;
(treeData || []).forEach((item, index) => {
item.size = (100 - depth * 20) > 60 ? (100 - depth * 20) : 60;
item.depth = depth;
recursionTreeData(item.children || [], depth + 1);
})
}
data.size = 100;
data.depth = 0;
recursionTreeData(data.children || [], 1);
graph.data(data);
graph.render();
graph.fitView();
}
}
componentDidUpdate(prevProps, prevState) {
const { childData, parentNodeId, data } = this.props;
if (parentNodeId && parentNodeId !== prevProps.parentNodeId) {
const parentData = graph.findDataById(parentNodeId);
if (!parentData.children) {
parentData.children = [];
}
let depth = childData.depth + 1;
(childData || []).forEach((item, index) => {
item.size = (100 - depth * 20) > 60 ? (100 - depth * 20) : 60;
item.depth = depth;
})
parentData.children = childData;
graph.changeData();
graph.updateItem(graph.findById(parentNodeId), {
collapsed: false,
});
} else if (data !== prevProps.data) {
this.layoutGraph();
}
}
render() {
const { type } = this.props;
return (
<div id={`container${type || ''}`} style={{ width: '100%', height: '100%', backgroundImage: 'linear-gradient(to bottom left,#2e3b4e,#0d0d13 52%,#0d0d13)' }}></div>
);
}
}
export default Relation;
let root = null, radius = false
G6.registerNode(
'relation-node',
{
draw(cfg, group) {
let [x, y] = [0, 30]
if (cfg.depth === 0) {
root = cfg
radius = cfg?.children?.length > 10
} else if (cfg?.children?.length > 10) {
[x, y] = textXY(root, cfg)
}
group.addShape('circle', {
attrs: {
x: 0,
y: 0,
r: (radius && cfg.depth !== 0) ? 10 : cfg.size / 4,
fill: colors[cfg.depth % colors.length],
},
});
const text = group.addShape('text', {
attrs: {
x,
y,
fill: '#fff',
fontSize: globalFontSize,
textAlign: 'center',
textBaseline: 'middle',
text: (cfg.label || ''),
}
});
const bbox = text.getBBox();
if (cfg.dbType === 'Root' || cfg.dbType === 'Dir') {
if (!cfg.children) {
group.addShape('marker', {
attrs: {
x: bbox.maxX,
y: bbox.maxY,
r: 6,
symbol: EXPAND_ICON,
stroke: '#73d13d',
lineWidth: 2,
}
});
} else if (cfg?.children?.length > 10) {
group.addShape('marker', {
attrs: {
x: bbox.maxX + 8,
y: bbox.height >> 1,
r: 6,
symbol: cfg.collapsed ? EXPAND_ICON : COLLAPSE_ICON,
stroke: cfg.collapsed ? '#73d13d' : '#ff4d4f',
lineWidth: 2,
}
});
}
cfg.anchorPoints = [[0.5, 0.5]]
} else {
cfg.anchorPoints = [
[0, 0.5],//右边
[0, .7],
[.1, .8],
[.2, .8],
[.3, .8],//顶部
[0, .3],
[.1, .2],
[.2, .2],
[.3, .2],//底部
[1, 0.5],//左边
[1, .7],
[.9, .8],
[.8, .8],
[.7, .8],//顶部
[1, .3],
[.9, .2],
[.8, .2],
[.7, .2],//底部
]
}
return group;
},
update: undefined,
},
'single-node'
);
G6.registerNode(
'relation-node-foucs',
{
draw(cfg, group) {
const width = 100;
const height = 100;
group.addShape('image', {
attrs: {
x: -width / 2,
y: -height / 2,
width,
height,
img: node,
},
name: 'image-shape',
});
const image = group.addShape('image', {
attrs: {
x: -width / 2,
y: -height / 2,
width,
height,
img: circle,
},
name: 'image-shape',
});
image.animate(
(ratio) => {
const toMatrix = G6.Util.transform(
[1, 0, 0, 0, 1, 0, 0, 0, 1],
[['r', ratio * Math.PI * 2]],
);
return {
matrix: toMatrix,
};
},
{
repeat: true,
duration: 3000,
easing: 'easeLinear',
},
);
let [x, y] = [0, 30]
if (cfg.depth === 0) {
root = cfg
radius = cfg?.children?.length > 10
} else if (cfg?.children?.length > 10) {
[x, y] = textXY(root, cfg)
}
group.addShape('circle', {
attrs: {
x: 0,
y: 0,
r: (radius && cfg.depth !== 0) ? 10 : cfg.size / 4,
fill: colors[cfg.depth % colors.length],
},
});
const text = group.addShape('text', {
attrs: {
x,
y,
fill: '#fff',
fontSize: globalFontSize,
textAlign: 'center',
textBaseline: 'middle',
text: (cfg.label || ''),
}
});
const bbox = text.getBBox();
if (cfg.dbType === 'Root' || cfg.dbType === 'Dir') {
if (!cfg.children) {
group.addShape('marker', {
attrs: {
x: bbox.maxX,
y: bbox.maxY,
r: 6,
symbol: EXPAND_ICON,
stroke: '#73d13d',
lineWidth: 2,
}
});
} else if (cfg?.children?.length > 10) {
group.addShape('marker', {
attrs: {
x: bbox.maxX + 8,
y: bbox.height >> 1,
r: 6,
symbol: cfg.collapsed ? EXPAND_ICON : COLLAPSE_ICON,
stroke: cfg.collapsed ? '#73d13d' : '#ff4d4f',
lineWidth: 2,
}
});
}
cfg.anchorPoints = [[0.5, 0.5]]
} else {
cfg.anchorPoints = [
[0, 0.5],//右边
[0, .7],
[.1, .8],
[.2, .8],
[.3, .8],//顶部
[0, .3],
[.1, .2],
[.2, .2],
[.3, .2],//底部
[1, 0.5],//左边
[1, .7],
[.9, .8],
[.8, .8],
[.7, .8],//顶部
[1, .3],
[.9, .2],
[.8, .2],
[.7, .2],//底部
]
}
return group;
},
update: undefined,
},
'single-node'
);
function textXY(root, cfg) {
const txtWidth = 10
const { x, y } = cfg
const _y = y - root.y, _x = x - root.x
const rad = 10
const angle = Math.atan2(_y, _x)
const sinAngle = Math.sin(angle), cosAngle = Math.cos(angle)
// console.log(angle, sinAngle, cosAngle)
const radX = rad
const radY = rad + Math.abs(sinAngle) * 10 + Math.abs(Math.pow(sinAngle, Math.abs(Math.round(sinAngle * 100)))) * 30 //Math.pow(Math.E, 80 * Math.log(Math.abs(sinAngle))) * 40
// console.log(angle, rad, txt)
return [
// 右侧文字(中间向右侧15px,上下部向左靠20px) : 左侧
radX * cosAngle + (cosAngle > 0 ? txtWidth + 15 - Math.abs(sinAngle * 20) : - (txtWidth + 15 - Math.abs(sinAngle * 20))),
radY * sinAngle
];
}
\ No newline at end of file
src/view/Manage/Map/Component/Relation2.jsx deleted 100644 → 0
import React from 'react';
import G6 from '@antv/g6';
import { isNumber, isArray } from '@antv/util';
import insertCss from 'insert-css';
import circle from './circle.93e1.png'
import node from './node-bg-select.171e.png'
import relations from './relations.json'
class Relation extends React.Component {
componentDidMount() {
init(this.elem, relations)
}
elem = undefined
render() {
const { type } = this.props;
return (
<div ref={ref=>this.elem = ref} style={{ width: '100%', height: '100%', backgroundImage: 'linear-gradient(to bottom left,#2e3b4e,#0d0d13 52%,#0d0d13)' }}></div>
);
}
}
export default Relation;
// https://g6.antv.vision/zh/examples/case/largeGraph#index
function init(container, data) {
// 实际开发中把 window.AntVUtil 换成从 @antv/util 引入的相关模块
// replace window.AntVUtil.isObject with
// import { isNumber, isArray } from '@antv/util';
// const { isNumber, isArray } = window.AntVUtil;
// 我们用 insert-css 演示引入自定义样式
// 推荐将样式添加到自己的样式文件中
// 若拷贝官方代码，别忘了 npm install insert-css
insertCss(`
.g6-component-contextmenu {
position: absolute;
z-index: 2;
list-style-type: none;
background-color: #363b40;
border-radius: 6px;
font-size: 14px;
color: hsla(0,0%,100%,.85);
width: fit-content;
transition: opacity .2s;
text-align: center;
padding: 0px 20px 0px 20px;
box-shadow: 0 5px 18px 0 rgba(0, 0, 0, 0.6);
border: 0px;
}
.g6-component-contextmenu ul {
padding-left: 0px;
margin: 0;
}
.g6-component-contextmenu li {
cursor: pointer;
list-style-type: none;
list-style: none;
margin-left: 0;
line-height: 38px;
}
.g6-component-contextmenu li:hover {
color: #aaaaaa;
}
`);
const { labelPropagation, louvain, findShortestPath } = G6.Algorithm;
const { uniqueId } = G6.Util;
const NODESIZEMAPPING = 'degree';
const SMALLGRAPHLABELMAXLENGTH = 5;
let labelMaxLength = SMALLGRAPHLABELMAXLENGTH;
const DEFAULTNODESIZE = 20;
const DEFAULTAGGREGATEDNODESIZE = 53;
const NODE_LIMIT = 40; // TODO: find a proper number for maximum node number on the canvas
let graph = null;
let currentUnproccessedData = { nodes: [], edges: [] };
let nodeMap = {};
let aggregatedNodeMap = {};
let hiddenItemIds = []; // 隐藏的元素 id 数组
let largeGraphMode = true;
let cachePositions = {};
let manipulatePosition = undefined;
let descreteNodeCenter;
let layout = {
type: '',
instance: null,
destroyed: true,
};
let expandArray = [];
let collapseArray = [];
let shiftKeydown = false;
let CANVAS_WIDTH = 800,
CANVAS_HEIGHT = 800;
const duration = 2000;
const animateOpacity = 0.6;
const animateBackOpacity = 0.1;
const virtualEdgeOpacity = 0.1;
const realEdgeOpacity = 0.2;
const darkBackColor = 'rgb(43, 47, 51)';
const disableColor = '#777';
const theme = 'dark';
const subjectColors = [
'#5F95FF', // blue
'#61DDAA',
'#65789B',
'#F6BD16',
'#7262FD',
'#78D3F8',
'#9661BC',
'#F6903D',
'#008685',
'#F08BB4',
];
const colorSets = G6.Util.getColorSetsBySubjectColors(
subjectColors,
darkBackColor,
theme,
disableColor,
);
const global = {
node: {
style: {
fill: '#2B384E',
},
labelCfg: {
style: {
fill: '#acaeaf',
stroke: '#191b1c',
},
},
stateStyles: {
focus: {
fill: '#2B384E',
},
},
},
edge: {
style: {
stroke: '#acaeaf',
realEdgeStroke: '#acaeaf', //'#f00',
realEdgeOpacity,
strokeOpacity: realEdgeOpacity,
},
labelCfg: {
style: {
fill: '#acaeaf',
realEdgeStroke: '#acaeaf', //'#f00',
realEdgeOpacity: 0.5,
stroke: '#191b1c',
},
},
stateStyles: {
focus: {
stroke: '#fff', // '#3C9AE8',
},
},
},
};
// Custom super node 超父结点
G6.registerNode(
'aggregated-node',
{
draw(cfg, group) {
let width = 53,
height = 27;
const style = cfg.style || {};
const colorSet = cfg.colorSet || colorSets[0];
// halo for hover 悬停的外圈
group.addShape('rect', {
attrs: {
x: -width * 0.55,
y: -height * 0.6,
width: width * 1.1,
height: height * 1.2,
fill: colorSet.mainFill,
opacity: 0.9,
lineWidth: 0,
radius: (height / 2 || 13) * 1.2,
},
name: 'halo-shape',
visible: false,
});
// focus stroke for hover 焦点高亮描边
group.addShape('rect', {
attrs: {
x: -width * 0.55,
y: -height * 0.6,
width: width * 1.1,
height: height * 1.2,
fill: colorSet.mainFill, // '#3B4043',
stroke: '#AAB7C4',
lineWidth: 1,
lineOpacty: 0.85,
radius: (height / 2 || 13) * 1.2,
},
name: 'stroke-shape',
visible: false,
});
// 关键结点
const keyShape = group.addShape('rect', {
attrs: {
...style,
x: -width / 2,
y: -height / 2,
width,
height,
fill: colorSet.mainFill, // || '#3B4043',
// stroke: colorSet.mainStroke,
lineWidth: 2,
cursor: 'pointer',
radius: height / 2 || 13,
lineDash: [2, 2],
},
name: 'aggregated-node-keyShape',
});
let labelStyle = {};
if (cfg.labelCfg) {
labelStyle = Object.assign(labelStyle, cfg.labelCfg.style);
}
group.addShape('text', {
attrs: {
text: `${cfg.count}`,
x: 0,
y: 0,
textAlign: 'center',
textBaseline: 'middle',
cursor: 'pointer',
fontSize: 12,
fill: '#fff',
opacity: 0.85,
fontWeight: 400,
},
name: 'count-shape',
className: 'count-shape',
draggable: true,
});
// tag for new node
if (cfg.new) {
group.addShape('circle', {
attrs: {
x: width / 2 - 3,
y: -height / 2 + 3,
r: 4,
fill: '#6DD400',
lineWidth: 0.5,
stroke: '#FFFFFF',
},
name: 'typeNode-tag-circle',
});
}
return keyShape;
},
setState: (name, value, item) => {
const group = item.get('group');
if (name === 'layoutEnd' && value) {
const labelShape = group.find((e) => e.get('name') === 'text-shape');
if (labelShape) labelShape.set('visible', true);
} else if (name === 'hover') {
if (item.hasState('focus')) {
return;
}
const halo = group.find((e) => e.get('name') === 'halo-shape');
const keyShape = item.getKeyShape();
const colorSet = item.getModel().colorSet || colorSets[0];
if (value) {
halo && halo.show();
keyShape.attr('fill', colorSet.activeFill);
} else {
halo && halo.hide();
keyShape.attr('fill', colorSet.mainFill);
}
} else if (name === 'focus') {
const stroke = group.find((e) => e.get('name') === 'stroke-shape');
const keyShape = item.getKeyShape();
const colorSet = item.getModel().colorSet || colorSets[0];
if (value) {
stroke && stroke.show();
keyShape.attr('fill', colorSet.selectedFill);
} else {
stroke && stroke.hide();
keyShape.attr('fill', colorSet.mainFill);
}
}
},
update: undefined,
},
'single-node',
);
// Custom real node
G6.registerNode(
'real-node',
{
draw(cfg, group) {
let r = 30;
if (isNumber(cfg.size)) {
r = cfg.size / 2;
} else if (isArray(cfg.size)) {
r = cfg.size[0] / 2;
}
const style = cfg.style || {};
const colorSet = cfg.colorSet || colorSets[0];
// halo for hover 悬停光晕
group.addShape('circle', {
attrs: {
x: 0,
y: 0,
r: r + 5,
fill: style.fill || colorSet.mainFill || '#2B384E',
opacity: 0.9,
lineWidth: 0,
},
name: 'halo-shape',
visible: false,
});
// focus stroke for hover 焦点
group.addShape('circle', {
attrs: {
x: 0,
y: 0,
r: r + 5,
fill: style.fill || colorSet.mainFill || '#2B384E',
stroke: '#fff',
strokeOpacity: 0.85,
lineWidth: 1,
},
name: 'stroke-shape',
visible: false,
});
const keyShape = group.addShape('circle', {
attrs: {
...style,
x: 0,
y: 0,
r,
fill: colorSet.mainFill,
stroke: colorSet.mainStroke,
lineWidth: 2,
cursor: 'pointer',
},
name: 'aggregated-node-keyShape',
});
let labelStyle = {};
if (cfg.labelCfg) {
labelStyle = Object.assign(labelStyle, cfg.labelCfg.style);
}
if (cfg.label) {
const text = cfg.label;
let labelStyle = {};
let refY = 0;
if (cfg.labelCfg) {
labelStyle = Object.assign(labelStyle, cfg.labelCfg.style);
refY += cfg.labelCfg.refY || 0;
}
let offsetY = 0;
const fontSize = labelStyle.fontSize < 8 ? 8 : labelStyle.fontSize;
const lineNum = cfg.labelLineNum || 1;
offsetY = lineNum * (fontSize || 12);
group.addShape('text', {
attrs: {
text,
x: 0,
y: r + refY + offsetY + 5,
textAlign: 'center',
textBaseLine: 'alphabetic',
cursor: 'pointer',
fontSize,
fill: '#fff',
opacity: 0.85,
fontWeight: 400,
stroke: global.edge.labelCfg.style.stroke,
},
name: 'text-shape',
className: 'text-shape',
});
}
// tag for new node
if (cfg.new) {
group.addShape('circle', {
attrs: {
x: r - 3,
y: -r + 3,
r: 4,
fill: '#6DD400',
lineWidth: 0.5,
stroke: '#FFFFFF',
},
name: 'typeNode-tag-circle',
});
}
return keyShape;
},
setState: (name, value, item) => {
const group = item.get('group');
if (name === 'layoutEnd' && value) {
const labelShape = group.find((e) => e.get('name') === 'text-shape');
if (labelShape) labelShape.set('visible', true);
} else if (name === 'hover') {
if (item.hasState('focus')) {
return;
}
const halo = group.find((e) => e.get('name') === 'halo-shape');
const keyShape = item.getKeyShape();
const colorSet = item.getModel().colorSet || colorSets[0];
if (value) {
halo && halo.show();
keyShape.attr('fill', colorSet.activeFill);
} else {
halo && halo.hide();
keyShape.attr('fill', colorSet.mainFill);
}
} else if (name === 'focus') {
const stroke = group.find((e) => e.get('name') === 'stroke-shape');
const label = group.find((e) => e.get('name') === 'text-shape');
const keyShape = item.getKeyShape();
const colorSet = item.getModel().colorSet || colorSets[0];
if (value) {
stroke && stroke.show();
keyShape.attr('fill', colorSet.selectedFill);
label && label.attr('fontWeight', 800);
} else {
stroke && stroke.hide();
keyShape.attr('fill', colorSet.mainFill); // '#2B384E'
label && label.attr('fontWeight', 400);
}
}
},
update: undefined,
},
'aggregated-node',
); // 这样可以继承 aggregated-node 的 setState
// Custom the quadratic edge for multiple edges between one node pair
G6.registerEdge(
'custom-quadratic',
{
setState: (name, value, item) => {
const group = item.get('group');
const model = item.getModel();
if (name === 'focus') {
const back = group.find((ele) => ele.get('name') === 'back-line');
if (back) {
back.stopAnimate();
back.remove();
back.destroy();
}
const keyShape = group.find((ele) => ele.get('name') === 'edge-shape');
const arrow = model.style.endArrow;
if (value) {
if (keyShape.cfg.animation) {
keyShape.stopAnimate(true);
}
keyShape.attr({
strokeOpacity: animateOpacity,
opacity: animateOpacity,
stroke: '#fff',
endArrow: {
...arrow,
stroke: '#fff',
fill: '#fff',
},
});
if (model.isReal) {
const { lineWidth, path, endArrow, stroke } = keyShape.attr();
const back = group.addShape('path', {
attrs: {
lineWidth,
path,
stroke,
endArrow,
opacity: animateBackOpacity,
},
name: 'back-line',
});
back.toBack();
const length = keyShape.getTotalLength();
keyShape.animate(
(ratio) => {
// the operations in each frame. Ratio ranges from 0 to 1 indicating the prograss of the animation. Returns the modified configurations
const startLen = ratio * length;
// Calculate the lineDash
const cfg = {
lineDash: [startLen, length - startLen],
};
return cfg;
},
{
repeat: true, // Whether executes the animation repeatly
duration, // the duration for executing once
},
);
} else {
let index = 0;
const lineDash = keyShape.attr('lineDash');
const totalLength = lineDash[0] + lineDash[1];
keyShape.animate(
() => {
index++;
if (index > totalLength) {
index = 0;
}
const res = {
lineDash,
lineDashOffset: -index,
};
// returns the modified configurations here, lineDash and lineDashOffset here
return res;
},
{
repeat: true, // whether executes the animation repeatly
duration, // the duration for executing once
},
);
}
} else {
keyShape.stopAnimate();
const stroke = '#acaeaf';
const opacity = model.isReal ? realEdgeOpacity : virtualEdgeOpacity;
keyShape.attr({
stroke,
strokeOpacity: opacity,
opacity,
endArrow: {
...arrow,
stroke,
fill: stroke,
},
});
}
}
},
},
'quadratic',
);
// Custom the line edge for single edge between one node pair
G6.registerEdge(
'custom-line',
{
setState: (name, value, item) => {
const group = item.get('group');
const model = item.getModel();
if (name === 'focus') {
const keyShape = group.find((ele) => ele.get('name') === 'edge-shape');
const back = group.find((ele) => ele.get('name') === 'back-line');
if (back) {
back.stopAnimate();
back.remove();
back.destroy();
}
const arrow = model.style.endArrow;
if (value) {
if (keyShape.cfg.animation) {
keyShape.stopAnimate(true);
}
keyShape.attr({
strokeOpacity: animateOpacity,
opacity: animateOpacity,
stroke: '#fff',
endArrow: {
...arrow,
stroke: '#fff',
fill: '#fff',
},
});
if (model.isReal) {
const { path, stroke, lineWidth } = keyShape.attr();
const back = group.addShape('path', {
attrs: {
path,
stroke,
lineWidth,
opacity: animateBackOpacity,
},
name: 'back-line',
});
back.toBack();
const length = keyShape.getTotalLength();
keyShape.animate(
(ratio) => {
// the operations in each frame. Ratio ranges from 0 to 1 indicating the prograss of the animation. Returns the modified configurations
const startLen = ratio * length;
// Calculate the lineDash
const cfg = {
lineDash: [startLen, length - startLen],
};
return cfg;
},
{
repeat: true, // Whether executes the animation repeatly
duration, // the duration for executing once
},
);
} else {
const lineDash = keyShape.attr('lineDash');
const totalLength = lineDash[0] + lineDash[1];
let index = 0;
keyShape.animate(
() => {
index++;
if (index > totalLength) {
index = 0;
}
const res = {
lineDash,
lineDashOffset: -index,
};
// returns the modified configurations here, lineDash and lineDashOffset here
return res;
},
{
repeat: true, // whether executes the animation repeatly
duration, // the duration for executing once
},
);
}
} else {
keyShape.stopAnimate();
const stroke = '#acaeaf';
const opacity = model.isReal ? realEdgeOpacity : virtualEdgeOpacity;
keyShape.attr({
stroke,
strokeOpacity: opacity,
opacity: opacity,
endArrow: {
...arrow,
stroke,
fill: stroke,
},
});
}
}
},
},
'single-edge',
);
const descendCompare = (p) => {
// 这是比较函数
return function (m, n) {
const a = m[p];
const b = n[p];
return b - a; // 降序
};
};
const clearFocusItemState = (graph) => {
if (!graph) return;
clearFocusNodeState(graph);
clearFocusEdgeState(graph);
};
// 清除图上所有节点的 focus 状态及相应样式
const clearFocusNodeState = (graph) => {
const focusNodes = graph.findAllByState('node', 'focus');
focusNodes.forEach((fnode) => {
graph.setItemState(fnode, 'focus', false); // false
});
};
// 清除图上所有边的 focus 状态及相应样式
const clearFocusEdgeState = (graph) => {
const focusEdges = graph.findAllByState('edge', 'focus');
focusEdges.forEach((fedge) => {
graph.setItemState(fedge, 'focus', false);
});
};
// 截断长文本。length 为文本截断后长度，elipsis 是后缀
const formatText = (text, length = 5, elipsis = '...') => {
if (!text) return '';
if (text.length > length) {
return `${text.substr(0, length)}${elipsis}`;
}
return text;
};
const labelFormatter = (text, minLength = 10) => {
if (text && text.split('').length > minLength) return `${text.substr(0, minLength)}...`;
return text;
};
const processNodesEdges = (
nodes,
edges,
width,
height,
largeGraphMode,
edgeLabelVisible,
isNewGraph = false,
) => {
if (!nodes || nodes.length === 0) return {};
const currentNodeMap = {};
let maxNodeCount = -Infinity;
const paddingRatio = 0.3;
const paddingLeft = paddingRatio * width;
const paddingTop = paddingRatio * height;
nodes.forEach((node) => {
node.type = node.level === 0 ? 'real-node' : 'aggregated-node';
node.isReal = node.level === 0 ? true : false;
node.label = `${node.id}`;
node.labelLineNum = undefined;
node.oriLabel = node.label;
node.label = formatText(node.label, labelMaxLength, '...');
node.degree = 0;
node.inDegree = 0;
node.outDegree = 0;
if (currentNodeMap[node.id]) {
console.warn('node exists already!', node.id);
node.id = `${node.id}${Math.random()}`;
}
currentNodeMap[node.id] = node;
if (node.count > maxNodeCount) maxNodeCount = node.count;
const cachePosition = cachePositions ? cachePositions[node.id] : undefined;
if (cachePosition) {
node.x = cachePosition.x;
node.y = cachePosition.y;
node.new = false;
} else {
node.new = isNewGraph ? false : true;
if (manipulatePosition && !node.x && !node.y) {
node.x = manipulatePosition.x + 30 * Math.cos(Math.random() * Math.PI * 2);
node.y = manipulatePosition.y + 30 * Math.sin(Math.random() * Math.PI * 2);
}
}
});
let maxCount = -Infinity;
let minCount = Infinity;
// let maxCount = 0;
edges.forEach((edge) => {
// to avoid the dulplicated id to nodes
if (!edge.id) edge.id = `edge-${uniqueId()}`;
else if (edge.id.split('-')[0] !== 'edge') edge.id = `edge-${edge.id}`;
// TODO: delete the following line after the queried data is correct
if (!currentNodeMap[edge.source] || !currentNodeMap[edge.target]) {
console.warn('edge source target does not exist', edge.source, edge.target, edge.id);
return;
}
const sourceNode = currentNodeMap[edge.source];
const targetNode = currentNodeMap[edge.target];
if (!sourceNode || !targetNode)
console.warn('source or target is not defined!!!', edge, sourceNode, targetNode);
// calculate the degree
sourceNode.degree++;
targetNode.degree++;
sourceNode.outDegree++;
targetNode.inDegree++;
if (edge.count > maxCount) maxCount = edge.count;
if (edge.count < minCount) minCount = edge.count;
});
nodes.sort(descendCompare(NODESIZEMAPPING));
const maxDegree = nodes[0].degree || 1;
const descreteNodes = [];
nodes.forEach((node, i) => {
// assign the size mapping to the outDegree
const countRatio = node.count / maxNodeCount;
const isRealNode = node.level === 0;
node.size = isRealNode ? DEFAULTNODESIZE : DEFAULTAGGREGATEDNODESIZE;
node.isReal = isRealNode;
node.labelCfg = {
position: 'bottom',
offset: 5,
style: {
fill: global.node.labelCfg.style.fill,
fontSize: 6 + countRatio * 6 || 12,
stroke: global.node.labelCfg.style.stroke,
lineWidth: 3,
},
};
if (!node.degree) {
descreteNodes.push(node);
}
});
const countRange = maxCount - minCount;
const minEdgeSize = 1;
const maxEdgeSize = 7;
const edgeSizeRange = maxEdgeSize - minEdgeSize;
edges.forEach((edge) => {
// set edges' style
const targetNode = currentNodeMap[edge.target];
const size = ((edge.count - minCount) / countRange) * edgeSizeRange + minEdgeSize || 1;
edge.size = size;
const arrowWidth = Math.max(size / 2 + 2, 3);
const arrowLength = 10;
const arrowBeging = targetNode.size + arrowLength;
let arrowPath = `M ${arrowBeging},0 L ${arrowBeging + arrowLength},-${arrowWidth} L ${arrowBeging + arrowLength
},${arrowWidth} Z`;
let d = targetNode.size / 2 + arrowLength;
if (edge.source === edge.target) {
edge.type = 'loop';
arrowPath = undefined;
}
const sourceNode = currentNodeMap[edge.source];
const isRealEdge = targetNode.isReal && sourceNode.isReal;
edge.isReal = isRealEdge;
const stroke = isRealEdge ? global.edge.style.realEdgeStroke : global.edge.style.stroke;
const opacity = isRealEdge
? global.edge.style.realEdgeOpacity
: global.edge.style.strokeOpacity;
const dash = Math.max(size, 2);
const lineDash = isRealEdge ? undefined : [dash, dash];
edge.style = {
stroke,
strokeOpacity: opacity,
cursor: 'pointer',
lineAppendWidth: Math.max(edge.size || 5, 5),
fillOpacity: 1,
lineDash,
endArrow: arrowPath
? {
path: arrowPath,
d,
fill: stroke,
strokeOpacity: 0,
}
: false,
};
edge.labelCfg = {
autoRotate: true,
style: {
stroke: global.edge.labelCfg.style.stroke,
fill: global.edge.labelCfg.style.fill,
lineWidth: 4,
fontSize: 12,
lineAppendWidth: 10,
opacity: 1,
},
};
if (!edge.oriLabel) edge.oriLabel = edge.label;
if (largeGraphMode || !edgeLabelVisible) edge.label = '';
else {
edge.label = labelFormatter(edge.label, labelMaxLength);
}
// arrange the other nodes around the hub
const sourceDis = sourceNode.size / 2 + 20;
const targetDis = targetNode.size / 2 + 20;
if (sourceNode.x && !targetNode.x) {
targetNode.x = sourceNode.x + sourceDis * Math.cos(Math.random() * Math.PI * 2);
}
if (sourceNode.y && !targetNode.y) {
targetNode.y = sourceNode.y + sourceDis * Math.sin(Math.random() * Math.PI * 2);
}
if (targetNode.x && !sourceNode.x) {
sourceNode.x = targetNode.x + targetDis * Math.cos(Math.random() * Math.PI * 2);
}
if (targetNode.y && !sourceNode.y) {
sourceNode.y = targetNode.y + targetDis * Math.sin(Math.random() * Math.PI * 2);
}
if (!sourceNode.x && !sourceNode.y && manipulatePosition) {
sourceNode.x = manipulatePosition.x + 30 * Math.cos(Math.random() * Math.PI * 2);
sourceNode.y = manipulatePosition.y + 30 * Math.sin(Math.random() * Math.PI * 2);
}
if (!targetNode.x && !targetNode.y && manipulatePosition) {
targetNode.x = manipulatePosition.x + 30 * Math.cos(Math.random() * Math.PI * 2);
targetNode.y = manipulatePosition.y + 30 * Math.sin(Math.random() * Math.PI * 2);
}
});
descreteNodeCenter = {
x: width - paddingLeft,
y: height - paddingTop,
};
descreteNodes.forEach((node) => {
if (!node.x && !node.y) {
node.x = descreteNodeCenter.x + 30 * Math.cos(Math.random() * Math.PI * 2);
node.y = descreteNodeCenter.y + 30 * Math.sin(Math.random() * Math.PI * 2);
}
});
G6.Util.processParallelEdges(edges, 12.5, 'custom-quadratic', 'custom-line');
return {
maxDegree,
edges,
};
};
const getForceLayoutConfig = (graph, largeGraphMode, configSettings) => {
let {
linkDistance,
edgeStrength,
nodeStrength,
nodeSpacing,
preventOverlap,
nodeSize,
collideStrength,
alpha,
alphaDecay,
alphaMin,
} = configSettings || { preventOverlap: true };
if (!linkDistance && linkDistance !== 0) linkDistance = 225;
if (!edgeStrength && edgeStrength !== 0) edgeStrength = 50;
if (!nodeStrength && nodeStrength !== 0) nodeStrength = 200;
if (!nodeSpacing && nodeSpacing !== 0) nodeSpacing = 5;
const config = {
type: 'gForce',
minMovement: 0.01,
maxIteration: 5000,
preventOverlap,
damping: 0.99,
linkDistance: (d) => {
let dist = linkDistance;
const sourceNode = nodeMap[d.source] || aggregatedNodeMap[d.source];
const targetNode = nodeMap[d.target] || aggregatedNodeMap[d.target];
// // 两端都是聚合点
// if (sourceNode.level && targetNode.level) dist = linkDistance * 3;
// // 一端是聚合点，一端是真实节点
// else if (sourceNode.level || targetNode.level) dist = linkDistance * 1.5;
if (!sourceNode.level && !targetNode.level) dist = linkDistance * 0.3;
return dist;
},
edgeStrength: (d) => {
const sourceNode = nodeMap[d.source] || aggregatedNodeMap[d.source];
const targetNode = nodeMap[d.target] || aggregatedNodeMap[d.target];
// 聚合节点之间的引力小
if (sourceNode.level && targetNode.level) return edgeStrength / 2;
// 聚合节点与真实节点之间引力大
if (sourceNode.level || targetNode.level) return edgeStrength;
return edgeStrength;
},
nodeStrength: (d) => {
// 给离散点引力，让它们聚集
if (d.degree === 0) return -10;
// 聚合点的斥力大
if (d.level) return nodeStrength * 2;
return nodeStrength;
},
nodeSize: (d) => {
if (!nodeSize && d.size) return d.size;
return 50;
},
nodeSpacing: (d) => {
if (d.degree === 0) return nodeSpacing * 2;
if (d.level) return nodeSpacing;
return nodeSpacing;
},
onLayoutEnd: () => {
if (largeGraphMode) {
graph.getEdges().forEach((edge) => {
if (!edge.oriLabel) return;
edge.update({
label: labelFormatter(edge.oriLabel, labelMaxLength),
});
});
}
},
tick: () => {
graph.refreshPositions();
},
};
if (nodeSize) config['nodeSize'] = nodeSize;
if (collideStrength) config['collideStrength'] = collideStrength;
if (alpha) config['alpha'] = alpha;
if (alphaDecay) config['alphaDecay'] = alphaDecay;
if (alphaMin) config['alphaMin'] = alphaMin;
return config;
};
const hideItems = (graph) => {
hiddenItemIds.forEach((id) => {
graph.hideItem(id);
});
};
const showItems = (graph) => {
graph.getNodes().forEach((node) => {
if (!node.isVisible()) graph.showItem(node);
});
graph.getEdges().forEach((edge) => {
if (!edge.isVisible()) edge.showItem(edge);
});
hiddenItemIds = [];
};
const handleRefreshGraph = (
graph,
graphData,
width,
height,
largeGraphMode,
edgeLabelVisible,
isNewGraph,
) => {
if (!graphData || !graph) return;
clearFocusItemState(graph);
// reset the filtering
graph.getNodes().forEach((node) => {
if (!node.isVisible()) node.show();
});
graph.getEdges().forEach((edge) => {
if (!edge.isVisible()) edge.show();
});
let nodes = [],
edges = [];
nodes = graphData.nodes;
const processRes = processNodesEdges(
nodes,
graphData.edges || [],
width,
height,
largeGraphMode,
edgeLabelVisible,
isNewGraph,
);
edges = processRes.edges;
graph.changeData({ nodes, edges });
hideItems(graph);
graph.getNodes().forEach((node) => {
node.toFront();
});
layout.instance.stop();
// force 需要使用不同 id 的对象才能进行全新的布局，否则会使用原来的引用。因此复制一份节点和边作为 force 的布局数据
layout.instance.init({
nodes: graphData.nodes,
edges,
});
layout.instance.minMovement = 0.0001;
// layout.instance.getCenter = d => {
// const cachePosition = cachePositions[d.id];
// if (!cachePosition && (d.x || d.y)) return [d.x, d.y, 10];
// else if (cachePosition) return [cachePosition.x, cachePosition.y, 10];
// return [width / 2, height / 2, 10];
// }
layout.instance.getMass = (d) => {
const cachePosition = cachePositions[d.id];
if (cachePosition) return 5;
return 1;
};
layout.instance.execute();
return { nodes, edges };
};
const getMixedGraph = (
aggregatedData,
originData,
nodeMap,
aggregatedNodeMap,
expandArray,
collapseArray,
) => {
let nodes = [],
edges = [];
const expandMap = {},
collapseMap = {};
expandArray.forEach((expandModel) => {
expandMap[expandModel.id] = true;
});
collapseArray.forEach((collapseModel) => {
collapseMap[collapseModel.id] = true;
});
// 增加结点
aggregatedData.clusters.forEach((cluster, i) => {
if (expandMap[cluster.id]) {
nodes = nodes.concat(cluster.nodes);
aggregatedNodeMap[cluster.id].expanded = true;
} else {
nodes.push(aggregatedNodeMap[cluster.id]);
aggregatedNodeMap[cluster.id].expanded = false;
}
});
originData.edges.forEach((edge) => {
const isSourceInExpandArray = expandMap[nodeMap[edge.source].clusterId];
const isTargetInExpandArray = expandMap[nodeMap[edge.target].clusterId];
if (isSourceInExpandArray && isTargetInExpandArray) {
edges.push(edge);
} else if (isSourceInExpandArray) {
const targetClusterId = nodeMap[edge.target].clusterId;
const vedge = {
source: edge.source,
target: targetClusterId,
id: `edge-${uniqueId()}`,
label: '',
};
edges.push(vedge);
} else if (isTargetInExpandArray) {
const sourceClusterId = nodeMap[edge.source].clusterId;
const vedge = {
target: edge.target,
source: sourceClusterId,
id: `edge-${uniqueId()}`,
label: '',
};
edges.push(vedge);
}
});
aggregatedData.clusterEdges.forEach((edge) => {
if (expandMap[edge.source] || expandMap[edge.target]) return;
else edges.push(edge);
});
return { nodes, edges };
};
const getNeighborMixedGraph = (
centerNodeModel,
step,
originData,
clusteredData,
currentData,
nodeMap,
aggregatedNodeMap,
maxNeighborNumPerNode = 5,
) => {
// update the manipulate position for center gravity of the new nodes
manipulatePosition = { x: centerNodeModel.x, y: centerNodeModel.y };
// the neighborSubGraph does not include the centerNodeModel. the elements are all generated new nodes and edges
const neighborSubGraph = generateNeighbors(centerNodeModel, step, maxNeighborNumPerNode);
// update the origin data
originData.nodes = originData.nodes.concat(neighborSubGraph.nodes);
originData.edges = originData.edges.concat(neighborSubGraph.edges);
// update the origin nodeMap
neighborSubGraph.nodes.forEach((node) => {
nodeMap[node.id] = node;
});
// update the clusteredData
const clusterId = centerNodeModel.clusterId;
clusteredData.clusters.forEach((cluster) => {
if (cluster.id !== clusterId) return;
cluster.nodes = cluster.nodes.concat(neighborSubGraph.nodes);
cluster.sumTot += neighborSubGraph.edges.length;
});
// update the count
aggregatedNodeMap[clusterId].count += neighborSubGraph.nodes.length;
currentData.nodes = currentData.nodes.concat(neighborSubGraph.nodes);
currentData.edges = currentData.edges.concat(neighborSubGraph.edges);
return currentData;
};
const generateNeighbors = (centerNodeModel, step, maxNeighborNumPerNode = 5) => {
if (step <= 0) return undefined;
let nodes = [],
edges = [];
const clusterId = centerNodeModel.clusterId;
const centerId = centerNodeModel.id;
const neighborNum = Math.ceil(Math.random() * maxNeighborNumPerNode);
for (let i = 0; i < neighborNum; i++) {
const neighborNode = {
id: uniqueId(),
clusterId,
level: 0,
colorSet: centerNodeModel.colorSet,
};
nodes.push(neighborNode);
const dire = Math.random() > 0.5;
const source = dire ? centerId : neighborNode.id;
const target = dire ? neighborNode.id : centerId;
const neighborEdge = {
id: uniqueId(),
source,
target,
label: `${source}-${target}`,
};
edges.push(neighborEdge);
const subNeighbors = generateNeighbors(neighborNode, step - 1, maxNeighborNumPerNode);
if (subNeighbors) {
nodes = nodes.concat(subNeighbors.nodes);
edges = edges.concat(subNeighbors.edges);
}
}
return { nodes, edges };
};
const getExtractNodeMixedGraph = (
extractNodeData,
originData,
nodeMap,
aggregatedNodeMap,
currentUnproccessedData,
) => {
const extractNodeId = extractNodeData.id;
// const extractNodeClusterId = extractNodeData.clusterId;
// push to the current rendering data
currentUnproccessedData.nodes.push(extractNodeData);
// update the count of aggregatedNodeMap, when to revert?
// aggregatedNodeMap[extractNodeClusterId].count --;
// extract the related edges
originData.edges.forEach((edge) => {
if (edge.source === extractNodeId) {
const targetClusterId = nodeMap[edge.target].clusterId;
if (!aggregatedNodeMap[targetClusterId].expanded) {
// did not expand, create an virtual edge fromt he extract node to the cluster
currentUnproccessedData.edges.push({
id: uniqueId(),
source: extractNodeId,
target: targetClusterId,
});
} else {
// if the cluster is already expanded, push the origin edge
currentUnproccessedData.edges.push(edge);
}
} else if (edge.target === extractNodeId) {
const sourceClusterId = nodeMap[edge.source].clusterId;
if (!aggregatedNodeMap[sourceClusterId].expanded) {
// did not expand, create an virtual edge fromt he extract node to the cluster
currentUnproccessedData.edges.push({
id: uniqueId(),
target: extractNodeId,
source: sourceClusterId,
});
} else {
// if the cluster is already expanded, push the origin edge
currentUnproccessedData.edges.push(edge);
}
}
});
return currentUnproccessedData;
};
const examAncestors = (model, expandedArray, length, keepTags) => {
for (let i = 0; i < length; i++) {
const expandedNode = expandedArray[i];
if (!keepTags[i] && model.parentId === expandedNode.id) {
keepTags[i] = true; // 需要被保留
examAncestors(expandedNode, expandedArray, length, keepTags);
break;
}
}
};
// 展开显示子节点
const manageExpandCollapseArray = (nodeNumber, model, collapseArray, expandArray) => {
manipulatePosition = { x: model.x, y: model.y };
// 维护 expandArray，若当前画布节点数高于上限，移出 expandedArray 中非 model 祖先的节点)
if (nodeNumber > NODE_LIMIT) {
// 若 keepTags[i] 为 true，则 expandedArray 的第 i 个节点需要被保留
const keepTags = {};
const expandLen = expandArray.length;
// 检查 X 的所有祖先并标记 keepTags
examAncestors(model, expandArray, expandLen, keepTags);
// 寻找 expandedArray 中第一个 keepTags 不为 true 的点
let shiftNodeIdx = -1;
for (let i = 0; i < expandLen; i++) {
if (!keepTags[i]) {
shiftNodeIdx = i;
break;
}
}
// 如果有符合条件的节点，将其从 expandedArray 中移除
if (shiftNodeIdx !== -1) {
let foundNode = expandArray[shiftNodeIdx];
if (foundNode.level === 2) {
let foundLevel1 = false;
// 找到 expandedArray 中 parentId = foundNode.id 且 level = 1 的第一个节点
for (let i = 0; i < expandLen; i++) {
const eNode = expandArray[i];
if (eNode.parentId === foundNode.id && eNode.level === 1) {
foundLevel1 = true;
foundNode = eNode;
expandArray.splice(i, 1);
break;
}
}
// 若未找到，则 foundNode 不变, 直接删去 foundNode
if (!foundLevel1) expandArray.splice(shiftNodeIdx, 1);
} else {
// 直接删去 foundNode
expandArray.splice(shiftNodeIdx, 1);
}
// const removedNode = expandedArray.splice(shiftNodeIdx, 1); // splice returns an array
const idSplits = foundNode.id.split('-');
let collapseNodeId;
// 去掉最后一个后缀
for (let i = 0; i < idSplits.length - 1; i++) {
const str = idSplits[i];
if (collapseNodeId) collapseNodeId = `${collapseNodeId}-${str}`;
else collapseNodeId = str;
}
const collapseNode = {
id: collapseNodeId,
parentId: foundNode.id,
level: foundNode.level - 1,
};
collapseArray.push(collapseNode);
}
}
const currentNode = {
id: model.id,
level: model.level,
parentId: model.parentId,
};
// 加入当前需要展开的节点
expandArray.push(currentNode);
graph.get('canvas').setCursor('default');
return { expandArray, collapseArray };
};
const cacheNodePositions = (nodes) => {
const positionMap = {};
const nodeLength = nodes.length;
for (let i = 0; i < nodeLength; i++) {
const node = nodes[i].getModel();
positionMap[node.id] = {
x: node.x,
y: node.y,
level: node.level,
};
}
return positionMap;
};
const stopLayout = () => {
// layout.instance.stop();
};
const bindListener = (graph) => {
graph.on('keydown', (evt) => {
const code = evt.key;
if (!code) {
return;
}
if (code.toLowerCase() === 'shift') {
shiftKeydown = true;
} else {
shiftKeydown = false;
}
});
graph.on('keyup', (evt) => {
const code = evt.key;
if (!code) {
return;
}
if (code.toLowerCase() === 'shift') {
shiftKeydown = false;
}
});
graph.on('node:mouseenter', (evt) => {
const { item } = evt;
const model = item.getModel();
const currentLabel = model.label;
model.oriFontSize = model.labelCfg.style.fontSize;
item.update({
label: model.oriLabel,
});
model.oriLabel = currentLabel;
graph.setItemState(item, 'hover', true);
item.toFront();
});
graph.on('node:mouseleave', (evt) => {
const { item } = evt;
const model = item.getModel();
const currentLabel = model.label;
item.update({
label: model.oriLabel,
});
model.oriLabel = currentLabel;
graph.setItemState(item, 'hover', false);
});
graph.on('edge:mouseenter', (evt) => {
const { item } = evt;
const model = item.getModel();
const currentLabel = model.label;
item.update({
label: model.oriLabel,
});
model.oriLabel = currentLabel;
item.toFront();
item.getSource().toFront();
item.getTarget().toFront();
});
graph.on('edge:mouseleave', (evt) => {
const { item } = evt;
const model = item.getModel();
const currentLabel = model.label;
item.update({
label: model.oriLabel,
});
model.oriLabel = currentLabel;
});
// click node to show the detail drawer
graph.on('node:click', (evt) => {
stopLayout();
if (!shiftKeydown) clearFocusItemState(graph);
else clearFocusEdgeState(graph);
const { item } = evt;
// highlight the clicked node, it is down by click-select
graph.setItemState(item, 'focus', true);
if (!shiftKeydown) {
// 将相关边也高亮
const relatedEdges = item.getEdges();
relatedEdges.forEach((edge) => {
graph.setItemState(edge, 'focus', true);
});
}
});
// click edge to show the detail of integrated edge drawer
graph.on('edge:click', (evt) => {
stopLayout();
if (!shiftKeydown) clearFocusItemState(graph);
const { item } = evt;
// highlight the clicked edge
graph.setItemState(item, 'focus', true);
});
// click canvas to cancel all the focus state
graph.on('canvas:click', (evt) => {
clearFocusItemState(graph);
console.log(graph.getGroup(), graph.getGroup().getBBox(), graph.getGroup().getCanvasBBox());
});
};
// fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json')
// .then((res) => res.json())
// .then((data) => {
// const container = document.getElementById('container');
// const descriptionDiv = document.createElement('div');
// descriptionDiv.innerHTML = `<a href='/en/largegraph' target='_blanck'>Click【HERE】To Full Demo</a>
// <br/>
// <a href='/zh/largegraph' target='_blanck'>点击【这里】进入完整 Demo</a>`;
// descriptionDiv.style.textAlign = 'right';
// descriptionDiv.style.color = '#fff';
// descriptionDiv.style.position = 'absolute';
// descriptionDiv.style.right = '32px';
// descriptionDiv.style.marginTop = '8px';
// container.appendChild(descriptionDiv);
container.style.backgroundColor = '#2b2f33';
CANVAS_WIDTH = container.scrollWidth;
CANVAS_HEIGHT = (container.scrollHeight || 500) - 30;
nodeMap = {};
const clusteredData = louvain(data, false, 'weight');
const aggregatedData = { nodes: [], edges: [] };
clusteredData.clusters.forEach((cluster, i) => {
cluster.nodes.forEach((node) => {
node.level = 0;
node.label = node.id;
node.type = '';
node.colorSet = colorSets[i];
nodeMap[node.id] = node;
});
const cnode = {
id: cluster.id,
type: 'aggregated-node',
count: cluster.nodes.length,
level: 1,
label: cluster.id,
colorSet: colorSets[i],
idx: i,
};
aggregatedNodeMap[cluster.id] = cnode;
aggregatedData.nodes.push(cnode);
});
clusteredData.clusterEdges.forEach((clusterEdge) => {
const cedge = {
...clusterEdge,
size: Math.log(clusterEdge.count),
label: '',
id: `edge-${uniqueId()}`,
};
if (cedge.source === cedge.target) {
cedge.type = 'loop';
cedge.loopCfg = {
dist: 20,
};
} else cedge.type = 'line';
aggregatedData.edges.push(cedge);
});
data.edges.forEach((edge) => {
edge.label = `${edge.source}-${edge.target}`;
edge.id = `edge-${uniqueId()}`;
});
currentUnproccessedData = aggregatedData;
const { edges: processedEdges } = processNodesEdges(
currentUnproccessedData.nodes,
currentUnproccessedData.edges,
CANVAS_WIDTH,
CANVAS_HEIGHT,
largeGraphMode,
true,
true,
);
const contextMenu = new G6.Menu({
shouldBegin(evt) {
if (evt.target && evt.target.isCanvas && evt.target.isCanvas()) return true;
if (evt.item) return true;
return false;
},
getContent(evt) {
const { item } = evt;
if (evt.target && evt.target.isCanvas && evt.target.isCanvas()) {
return `<ul>
<li id='show'>Show all Hidden Items</li>
<li id='collapseAll'>Collapse all Clusters</li>
</ul>`;
} else if (!item) return;
const itemType = item.getType();
const model = item.getModel();
if (itemType && model) {
if (itemType === 'node') {
if (model.level !== 0) {
return `<ul>
<li id='expand'>Expand the Cluster</li>
<li id='hide'>Hide the Node</li>
</ul>`;
} else {
return `<ul>
<li id='collapse'>Collapse the Cluster</li>
<li id='neighbor-1'>Find 1-degree Neighbors</li>
<li id='neighbor-2'>Find 2-degree Neighbors</li>
<li id='neighbor-3'>Find 3-degree Neighbors</li>
<li id='hide'>Hide the Node</li>
</ul>`;
}
} else {
return `<ul>
<li id='hide'>Hide the Edge</li>
</ul>`;
}
}
},
handleMenuClick: (target, item) => {
const model = item && item.getModel();
const liIdStrs = target.id.split('-');
let mixedGraphData;
switch (liIdStrs[0]) {
case 'hide':
graph.hideItem(item);
hiddenItemIds.push(model.id);
break;
case 'expand':
const newArray = manageExpandCollapseArray(
graph.getNodes().length,
model,
collapseArray,
expandArray,
);
expandArray = newArray.expandArray;
collapseArray = newArray.collapseArray;
// 展开
mixedGraphData = getMixedGraph(
clusteredData,
data,
nodeMap,
aggregatedNodeMap,
expandArray,
collapseArray,
);
break;
case 'collapse':
const aggregatedNode = aggregatedNodeMap[model.clusterId];
manipulatePosition = { x: aggregatedNode.x, y: aggregatedNode.y };
collapseArray.push(aggregatedNode);
for (let i = 0; i < expandArray.length; i++) {
if (expandArray[i].id === model.clusterId) {
expandArray.splice(i, 1);
break;
}
}
mixedGraphData = getMixedGraph(
clusteredData,
data,
nodeMap,
aggregatedNodeMap,
expandArray,
collapseArray,
);
break;
case 'collapseAll':
expandArray = [];
collapseArray = [];
mixedGraphData = getMixedGraph(
clusteredData,
data,
nodeMap,
aggregatedNodeMap,
expandArray,
collapseArray,
);
break;
case 'neighbor':
const expandNeighborSteps = parseInt(liIdStrs[1]);
mixedGraphData = getNeighborMixedGraph(
model,
expandNeighborSteps,
data,
clusteredData,
currentUnproccessedData,
nodeMap,
aggregatedNodeMap,
10,
);
break;
case 'show':
showItems(graph);
break;
default:
break;
}
if (mixedGraphData) {
cachePositions = cacheNodePositions(graph.getNodes());
currentUnproccessedData = mixedGraphData;
handleRefreshGraph(
graph,
currentUnproccessedData,
CANVAS_WIDTH,
CANVAS_HEIGHT,
largeGraphMode,
true,
false,
);
}
},
// offsetX and offsetY include the padding of the parent container
// 需要加上父级容器的 padding-left 16 与自身偏移量 10
offsetX: 16 + 10,
// 需要加上父级容器的 padding-top 24 、画布兄弟元素高度、与自身偏移量 10
offsetY: 0,
// the types of items that allow the menu show up
// 在哪些类型的元素上响应
itemTypes: ['node', 'edge', 'canvas'],
});
graph = new G6.Graph({
container,
width: CANVAS_WIDTH,
height: CANVAS_HEIGHT,
linkCenter: true,
minZoom: 0.1,
groupByTypes: false,
modes: {
default: [
{
type: 'drag-canvas',
enableOptimize: true,
},
{
type: 'zoom-canvas',
enableOptimize: true,
optimizeZoom: 0.01,
},
'drag-node',
'shortcuts-call',
],
lassoSelect: [
{
type: 'zoom-canvas',
enableOptimize: true,
optimizeZoom: 0.01,
},
{
type: 'lasso-select',
selectedState: 'focus',
trigger: 'drag',
},
],
fisheyeMode: [],
},
defaultNode: {
type: 'aggregated-node',
size: DEFAULTNODESIZE,
},
plugins: [contextMenu],
});
graph.get('canvas').set('localRefresh', false);
const layoutConfig = getForceLayoutConfig(graph, largeGraphMode);
layoutConfig.center = [CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2];
layout.instance = new G6.Layout['gForce'](layoutConfig);
layout.instance.init({
nodes: currentUnproccessedData.nodes,
edges: processedEdges,
});
layout.instance.execute();
bindListener(graph);
graph.data({ nodes: aggregatedData.nodes, edges: processedEdges });
graph.render();
// });
if (typeof window !== 'undefined')
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
const container = document.getElementById('container');
if (!container) return;
graph.changeSize(container.scrollWidth, container.scrollHeight - 30);
};
}
\ No newline at end of file
src/view/Manage/Map/Component/SquareItem.jsx deleted 100644 → 0
import React from 'react';
import { Row, Col } from 'antd';
import classnames from 'classnames';
import './SquareItem.less';
import dirImg from "./assets/1.png";
import assetImg from "./assets/3.png";
class SquareItem extends React.Component {
onItemClick = () => {
const { item, onClick } = this.props;
if (onClick && item) {
if (item.dbType === 'Dir') {
onClick(item);
} else {
}
}
}
render() {
const { item } = this.props;
const title = (item.dbType==='Dir') ? (item.dirName||'') : (item.cnName||'');
const content = (item.dbType==='Dir') ? (item.subDirCount + item.tableModelCount) : (item.enName||'');
const rightClasses = classnames('right', {
'right-asset': (item.dbType!=='Dir')
});
return (
<Row className='map-square-item' onClick={this.onItemClick} style={{ cursor: (item.dbType==='Dir')?'pointer':'default' }}>
<Col span={8} className='left'>
<div className='flex' style={{ height: '100%', justifyContent: 'center', alignItems: 'center' }}>
<img src={(item.dbType==='Dir')?dirImg:assetImg} style={{ width: '38px', height: '38px' }} alt="" />
</div>
</Col>
<Col span={16} className={rightClasses} style={{ backgroundPosition: 'bottom right' }}>
<div className='flex' style={{ height: '100%', alignItems: 'center' }}>
<div className='flex-auto textOverflow'>
<div className='title textOverflow' title={title}>{title}</div>
<div className='content textOverflow' title={content}>{content}</div>
</div>
</div>
</Col>
</Row>
);
}
}
export default SquareItem;
\ No newline at end of file
src/view/Manage/Map/Component/SquareItem.less deleted 100644 → 0
.map-square-item {
height: 104px;
box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.08);
border-radius: 4px;
.left {
height: 100%;
background: #0069AC;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.right {
padding: 0 10px;
background-image: url('./assets/2.png');
background-repeat:no-repeat;
}
.right-asset {
background-image: url('./assets/4.png');
}
.title {
color: #C1C1C1;
font-size: 14px;
}
.content {
font-size: 25px;
font-weight: bold;
color: #575757;
margin-top: 10px;
}
}
\ No newline at end of file
src/view/Manage/Map/Component/Tree.jsx deleted 100644 → 0
import React from 'react';
import G6 from '@antv/g6';
let graph = null;
const globalFontSize = 20;
const maxTextWidth = 160;
const COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) {
return [
['M', x - r, y - r],
['a', r, r, 0, 1, 0, r * 2, 0],
['a', r, r, 0, 1, 0, -r * 2, 0],
['M', x + 2 - r, y - r],
['L', x + r - 2, y - r],
];
};
const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
return [
['M', x - r, y - r],
['a', r, r, 0, 1, 0, r * 2, 0],
['a', r, r, 0, 1, 0, -r * 2, 0],
['M', x + 2 - r, y - r],
['L', x + r - 2, y - r],
['M', x, y - 2 * r + 2],
['L', x, y - 2],
];
};
class Tree extends React.Component {
componentDidUpdate(prevProps, prevState){
const { childData, parentNodeId, data } = this.props;
if (parentNodeId && parentNodeId!== prevProps.parentNodeId) {
const parentData = this.graph?.findDataById(parentNodeId);
if (!parentData.children) {
parentData.children = [];
}
parentData.children = parentData.children.filter(item => item.dbType!=='More');
parentData.children = [...parentData.children, ...childData];
this.graph?.changeData();
this.graph?.updateItem(this.graph?.findById(parentNodeId), {
collapsed: false,
});
} else if (data && data !== prevProps.data && parentNodeId===null) {
this.graph?.destroy();
this.graph = init(this)(this.elem, this.props.data);
}
}
graph = undefined
elem = undefined
render() {
const { styles } = this.props;
return (
<div ref={ref => this.elem = ref} style={styles} />
);
}
}
export default Tree;
const init = (ctx) => function (container, data) {
const width = container.scrollWidth;
const height = container.scrollHeight;
const tooltip = new G6.Tooltip({
offsetX: 10,
offsetY: 10,
// the types of items that allow the tooltip show up
// 允许出现 tooltip 的 item 类型
itemTypes: ['node'],
// custom the tooltip's content
// 自定义 tooltip 内容
getContent: (e) => {
const outDiv = document.createElement('div');
outDiv.style.width = 'fit-content';
//outDiv.style.padding = '0px 0px 20px 0px';
outDiv.innerHTML = `
<h4>${e.item.getModel().text||''}</h4>
`;
return outDiv;
},
});
graph = new G6.TreeGraph({
container,
animate: false,
width,
height,
maxZoom: 1,
plugins: [tooltip],
modes: {
default: [
{
type: 'collapse-expand',
onChange: function onChange(item, collapsed) {
const data = item.get('model');
graph.updateItem(item, {
collapsed,
});
data.collapsed = collapsed;
return true;
},
},
'drag-canvas',
'zoom-canvas',
],
},
defaultNode: {
type: 'tree-node',
anchorPoints: [
[0, 0.5],
[1, 0.5],
],
},
defaultEdge: {
type: 'cubic-horizontal',
size: 2,
color: '#e2e2e2',
style: {
endArrow: true
}
},
layout: {
type: 'compactBox',
direction: 'LR', // H / V / LR / RL / TB / BT
getId: function getId(d) {
return d.id;
},
getVGap: function getVGap() {
return 20;
},
getHGap: function getHGap() {
return 200;
},
},
});
const fittingString = (str, maxWidth, fontSize) => {
const ellipsis = '...';
const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
let currentWidth = 0;
let res = str;
const pattern = new RegExp('[\u4E00-\u9FA5]+'); // distinguish the Chinese charactors and letters
str.split('').forEach((letter, i) => {
if (currentWidth > maxWidth - ellipsisLength) return;
if (pattern.test(letter)) {
// Chinese charactors
currentWidth += fontSize;
} else {
// get the width of single letter according to the fontSize
currentWidth += G6.Util.getLetterWidth(letter, fontSize);
}
if (currentWidth > maxWidth - ellipsisLength) {
res = `${str.substr(0, i)}${ellipsis}`;
}
});
return res;
};
graph.node(function (node) {
return {
label: fittingString(node.text||'', maxTextWidth, globalFontSize),
};
});
graph.data(data);
graph.render();
graph.fitView();
graph.on('node:click', function (e) {
const node = e.item;
const nodeId = node.get('id');
const model = node.getModel();
if (model.dbType==='Dir') {
const children = model.children;
if (!children) {
ctx.props?.loadSubLeafData(model.dirId||'', nodeId);
}
} else if (model.dbType === 'Table') {
ctx.props?.onAssetClick(model.tid);
} else if (model.dbType === 'More') {
ctx.props?.loadMoreLeafData(model.pDirId, model.pid, model.index);
}
});
if (typeof window !== 'undefined') {
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.changeSize(container.scrollWidth, container.scrollHeight);
};
}
return graph;
}
G6.registerNode(
'tree-node',
{
draw(cfg, group) {
const rect = group.addShape('rect', {
attrs: {
fill: '#fff',
// stroke: '#666',
radius: 2,
shadowOffsetX: 1,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.09)',
shadowBlur: 16,
cursor: (cfg.dbType==='Dir'||cfg.dbType==='More')?'pointer':'default',
},
});
const topRect = group.addShape('rect', {
attrs: {
height: 4,
fill: '#0069AC',
}
})
const content = (cfg.label||'').replace(/(.{19})/g, '$1\n');
const text = group.addShape('text', {
attrs: {
x: 0,
y: 8,
fill: '#000',
fontSize: globalFontSize,
textAlign: 'left',
textBaseline: 'middle',
text: content,
cursor: (cfg.dbType==='Dir'||cfg.dbType==='More')?'pointer':'default',
}
});
const bbox = text.getBBox();
if (cfg.dbType==='Dir') {
if (!cfg.children) {
group.addShape('marker', {
attrs: {
x: bbox.maxX + 12,
y: bbox.height/2 + 8 -3,
r: 6,
symbol: EXPAND_ICON,
stroke: '#73d13d',
lineWidth: 2,
cursor: 'pointer'
}
});
} else if ((cfg.children||[]).length>0) {
group.addShape('marker', {
attrs: {
x: bbox.maxX + 12,
y: bbox.height/2 + 8 -3,
r: 6,
symbol: cfg.collapsed ? EXPAND_ICON : COLLAPSE_ICON,
stroke: cfg.collapsed ? '#73d13d' : '#ff4d4f',
lineWidth: 2,
cursor: 'pointer',
}
});
}
}
topRect.attr({
x: bbox.minX - 10,
y: bbox.minY - 10,
width: bbox.width + (cfg.dbType==='Dir'&&(!cfg.children||((cfg.children||[]).length>0)) ? 38 : 20),
})
rect.attr({
x: bbox.minX - 10,
y: bbox.minY - 10,
width: bbox.width + (cfg.dbType==='Dir'&&(!cfg.children||((cfg.children||[]).length>0)) ? 38 : 20),
height: bbox.height + 20,
});
return group;
},
update: undefined,
},
'single-node'
);
\ No newline at end of file
src/view/Manage/Map/Component/relations.json deleted 100644 → 0
{
"nodes": [
{
"id": "Myriel"
},
{
"id": "Napoleon"
},
{
"id": "Mlle.Baptistine"
},
{
"id": "Mme.Magloire"
},
{
"id": "CountessdeLo"
},
{
"id": "Geborand"
},
{
"id": "Champtercier"
},
{
"id": "Cravatte"
},
{
"id": "Count"
},
{
"id": "OldMan"
},
{
"id": "Labarre"
},
{
"id": "Valjean"
},
{
"id": "Marguerite"
},
{
"id": "Mme.deR"
},
{
"id": "Isabeau"
},
{
"id": "Gervais"
},
{
"id": "Tholomyes"
},
{
"id": "Listolier"
},
{
"id": "Fameuil"
},
{
"id": "Blacheville"
},
{
"id": "Favourite"
},
{
"id": "Dahlia"
},
{
"id": "Zephine"
},
{
"id": "Fantine"
},
{
"id": "Mme.Thenardier"
},
{
"id": "Thenardier"
},
{
"id": "Cosette"
},
{
"id": "Javert"
},
{
"id": "Fauchelevent"
},
{
"id": "Bamatabois"
},
{
"id": "Perpetue"
},
{
"id": "Simplice"
},
{
"id": "Scaufflaire"
},
{
"id": "Woman1"
},
{
"id": "Judge"
},
{
"id": "Champmathieu"
},
{
"id": "Brevet"
},
{
"id": "Chenildieu"
},
{
"id": "Cochepaille"
},
{
"id": "Pontmercy"
},
{
"id": "Boulatruelle"
},
{
"id": "Eponine"
},
{
"id": "Anzelma"
},
{
"id": "Woman2"
},
{
"id": "MotherInnocent"
},
{
"id": "Gribier"
},
{
"id": "Jondrette"
},
{
"id": "Mme.Burgon"
},
{
"id": "Gavroche"
},
{
"id": "Gillenormand"
},
{
"id": "Magnon"
},
{
"id": "Mlle.Gillenormand"
},
{
"id": "Mme.Pontmercy"
},
{
"id": "Mlle.Vaubois"
},
{
"id": "Lt.Gillenormand"
},
{
"id": "Marius"
},
{
"id": "BaronessT"
},
{
"id": "Mabeuf"
},
{
"id": "Enjolras"
},
{
"id": "Combeferre"
},
{
"id": "Prouvaire"
},
{
"id": "Feuilly"
},
{
"id": "Courfeyrac"
},
{
"id": "Bahorel"
},
{
"id": "Bossuet"
},
{
"id": "Joly"
},
{
"id": "Grantaire"
},
{
"id": "MotherPlutarch"
},
{
"id": "Gueulemer"
},
{
"id": "Babet"
},
{
"id": "Claquesous"
},
{
"id": "Montparnasse"
},
{
"id": "Toussaint"
},
{
"id": "Child1"
},
{
"id": "Child2"
},
{
"id": "Brujon"
},
{
"id": "Mme.Hucheloup"
}
],
"edges": [
{
"source": "Napoleon",
"target": "Myriel",
"value": 1
},
{
"source": "Mlle.Baptistine",
"target": "Myriel",
"value": 8
},
{
"source": "Mme.Magloire",
"target": "Myriel",
"value": 10
},
{
"source": "Mme.Magloire",
"target": "Mlle.Baptistine",
"value": 6
},
{
"source": "CountessdeLo",
"target": "Myriel",
"value": 1
},
{
"source": "Geborand",
"target": "Myriel",
"value": 1
},
{
"source": "Champtercier",
"target": "Myriel",
"value": 1
},
{
"source": "Cravatte",
"target": "Myriel",
"value": 1
},
{
"source": "Count",
"target": "Myriel",
"value": 2
},
{
"source": "OldMan",
"target": "Myriel",
"value": 1
},
{
"source": "Valjean",
"target": "Labarre",
"value": 1
},
{
"source": "Valjean",
"target": "Mme.Magloire",
"value": 3
},
{
"source": "Valjean",
"target": "Mlle.Baptistine",
"value": 3
},
{
"source": "Valjean",
"target": "Myriel",
"value": 5
},
{
"source": "Marguerite",
"target": "Valjean",
"value": 1
},
{
"source": "Mme.deR",
"target": "Valjean",
"value": 1
},
{
"source": "Isabeau",
"target": "Valjean",
"value": 1
},
{
"source": "Gervais",
"target": "Valjean",
"value": 1
},
{
"source": "Listolier",
"target": "Tholomyes",
"value": 4
},
{
"source": "Fameuil",
"target": "Tholomyes",
"value": 4
},
{
"source": "Fameuil",
"target": "Listolier",
"value": 4
},
{
"source": "Blacheville",
"target": "Tholomyes",
"value": 4
},
{
"source": "Blacheville",
"target": "Listolier",
"value": 4
},
{
"source": "Blacheville",
"target": "Fameuil",
"value": 4
},
{
"source": "Favourite",
"target": "Tholomyes",
"value": 3
},
{
"source": "Favourite",
"target": "Listolier",
"value": 3
},
{
"source": "Favourite",
"target": "Fameuil",
"value": 3
},
{
"source": "Favourite",
"target": "Blacheville",
"value": 4
},
{
"source": "Dahlia",
"target": "Tholomyes",
"value": 3
},
{
"source": "Dahlia",
"target": "Listolier",
"value": 3
},
{
"source": "Dahlia",
"target": "Fameuil",
"value": 3
},
{
"source": "Dahlia",
"target": "Blacheville",
"value": 3
},
{
"source": "Dahlia",
"target": "Favourite",
"value": 5
},
{
"source": "Zephine",
"target": "Tholomyes",
"value": 3
},
{
"source": "Zephine",
"target": "Listolier",
"value": 3
},
{
"source": "Zephine",
"target": "Fameuil",
"value": 3
},
{
"source": "Zephine",
"target": "Blacheville",
"value": 3
},
{
"source": "Zephine",
"target": "Favourite",
"value": 4
},
{
"source": "Zephine",
"target": "Dahlia",
"value": 4
},
{
"source": "Fantine",
"target": "Tholomyes",
"value": 3
},
{
"source": "Fantine",
"target": "Listolier",
"value": 3
},
{
"source": "Fantine",
"target": "Fameuil",
"value": 3
},
{
"source": "Fantine",
"target": "Blacheville",
"value": 3
},
{
"source": "Fantine",
"target": "Favourite",
"value": 4
},
{
"source": "Fantine",
"target": "Dahlia",
"value": 4
},
{
"source": "Fantine",
"target": "Zephine",
"value": 4
},
{
"source": "Fantine",
"target": "Marguerite",
"value": 2
},
{
"source": "Fantine",
"target": "Valjean",
"value": 9
},
{
"source": "Mme.Thenardier",
"target": "Fantine",
"value": 2
},
{
"source": "Mme.Thenardier",
"target": "Valjean",
"value": 7
},
{
"source": "Thenardier",
"target": "Mme.Thenardier",
"value": 13
},
{
"source": "Thenardier",
"target": "Fantine",
"value": 1
},
{
"source": "Thenardier",
"target": "Valjean",
"value": 12
},
{
"source": "Cosette",
"target": "Mme.Thenardier",
"value": 4
},
{
"source": "Cosette",
"target": "Valjean",
"value": 31
},
{
"source": "Cosette",
"target": "Tholomyes",
"value": 1
},
{
"source": "Cosette",
"target": "Thenardier",
"value": 1
},
{
"source": "Javert",
"target": "Valjean",
"value": 17
},
{
"source": "Javert",
"target": "Fantine",
"value": 5
},
{
"source": "Javert",
"target": "Thenardier",
"value": 5
},
{
"source": "Javert",
"target": "Mme.Thenardier",
"value": 1
},
{
"source": "Javert",
"target": "Cosette",
"value": 1
},
{
"source": "Fauchelevent",
"target": "Valjean",
"value": 8
},
{
"source": "Fauchelevent",
"target": "Javert",
"value": 1
},
{
"source": "Bamatabois",
"target": "Fantine",
"value": 1
},
{
"source": "Bamatabois",
"target": "Javert",
"value": 1
},
{
"source": "Bamatabois",
"target": "Valjean",
"value": 2
},
{
"source": "Perpetue",
"target": "Fantine",
"value": 1
},
{
"source": "Simplice",
"target": "Perpetue",
"value": 2
},
{
"source": "Simplice",
"target": "Valjean",
"value": 3
},
{
"source": "Simplice",
"target": "Fantine",
"value": 2
},
{
"source": "Simplice",
"target": "Javert",
"value": 1
},
{
"source": "Scaufflaire",
"target": "Valjean",
"value": 1
},
{
"source": "Woman1",
"target": "Valjean",
"value": 2
},
{
"source": "Woman1",
"target": "Javert",
"value": 1
},
{
"source": "Judge",
"target": "Valjean",
"value": 3
},
{
"source": "Judge",
"target": "Bamatabois",
"value": 2
},
{
"source": "Champmathieu",
"target": "Valjean",
"value": 3
},
{
"source": "Champmathieu",
"target": "Judge",
"value": 3
},
{
"source": "Champmathieu",
"target": "Bamatabois",
"value": 2
},
{
"source": "Brevet",
"target": "Judge",
"value": 2
},
{
"source": "Brevet",
"target": "Champmathieu",
"value": 2
},
{
"source": "Brevet",
"target": "Valjean",
"value": 2
},
{
"source": "Brevet",
"target": "Bamatabois",
"value": 1
},
{
"source": "Chenildieu",
"target": "Judge",
"value": 2
},
{
"source": "Chenildieu",
"target": "Champmathieu",
"value": 2
},
{
"source": "Chenildieu",
"target": "Brevet",
"value": 2
},
{
"source": "Chenildieu",
"target": "Valjean",
"value": 2
},
{
"source": "Chenildieu",
"target": "Bamatabois",
"value": 1
},
{
"source": "Cochepaille",
"target": "Judge",
"value": 2
},
{
"source": "Cochepaille",
"target": "Champmathieu",
"value": 2
},
{
"source": "Cochepaille",
"target": "Brevet",
"value": 2
},
{
"source": "Cochepaille",
"target": "Chenildieu",
"value": 2
},
{
"source": "Cochepaille",
"target": "Valjean",
"value": 2
},
{
"source": "Cochepaille",
"target": "Bamatabois",
"value": 1
},
{
"source": "Pontmercy",
"target": "Thenardier",
"value": 1
},
{
"source": "Boulatruelle",
"target": "Thenardier",
"value": 1
},
{
"source": "Eponine",
"target": "Mme.Thenardier",
"value": 2
},
{
"source": "Eponine",
"target": "Thenardier",
"value": 3
},
{
"source": "Anzelma",
"target": "Eponine",
"value": 2
},
{
"source": "Anzelma",
"target": "Thenardier",
"value": 2
},
{
"source": "Anzelma",
"target": "Mme.Thenardier",
"value": 1
},
{
"source": "Woman2",
"target": "Valjean",
"value": 3
},
{
"source": "Woman2",
"target": "Cosette",
"value": 1
},
{
"source": "Woman2",
"target": "Javert",
"value": 1
},
{
"source": "MotherInnocent",
"target": "Fauchelevent",
"value": 3
},
{
"source": "MotherInnocent",
"target": "Valjean",
"value": 1
},
{
"source": "Gribier",
"target": "Fauchelevent",
"value": 2
},
{
"source": "Mme.Burgon",
"target": "Jondrette",
"value": 1
},
{
"source": "Gavroche",
"target": "Mme.Burgon",
"value": 2
},
{
"source": "Gavroche",
"target": "Thenardier",
"value": 1
},
{
"source": "Gavroche",
"target": "Javert",
"value": 1
},
{
"source": "Gavroche",
"target": "Valjean",
"value": 1
},
{
"source": "Gillenormand",
"target": "Cosette",
"value": 3
},
{
"source": "Gillenormand",
"target": "Valjean",
"value": 2
},
{
"source": "Magnon",
"target": "Gillenormand",
"value": 1
},
{
"source": "Magnon",
"target": "Mme.Thenardier",
"value": 1
},
{
"source": "Mlle.Gillenormand",
"target": "Gillenormand",
"value": 9
},
{
"source": "Mlle.Gillenormand",
"target": "Cosette",
"value": 2
},
{
"source": "Mlle.Gillenormand",
"target": "Valjean",
"value": 2
},
{
"source": "Mme.Pontmercy",
"target": "Mlle.Gillenormand",
"value": 1
},
{
"source": "Mme.Pontmercy",
"target": "Pontmercy",
"value": 1
},
{
"source": "Mlle.Vaubois",
"target": "Mlle.Gillenormand",
"value": 1
},
{
"source": "Lt.Gillenormand",
"target": "Mlle.Gillenormand",
"value": 2
},
{
"source": "Lt.Gillenormand",
"target": "Gillenormand",
"value": 1
},
{
"source": "Lt.Gillenormand",
"target": "Cosette",
"value": 1
},
{
"source": "Marius",
"target": "Mlle.Gillenormand",
"value": 6
},
{
"source": "Marius",
"target": "Gillenormand",
"value": 12
},
{
"source": "Marius",
"target": "Pontmercy",
"value": 1
},
{
"source": "Marius",
"target": "Lt.Gillenormand",
"value": 1
},
{
"source": "Marius",
"target": "Cosette",
"value": 21
},
{
"source": "Marius",
"target": "Valjean",
"value": 19
},
{
"source": "Marius",
"target": "Tholomyes",
"value": 1
},
{
"source": "Marius",
"target": "Thenardier",
"value": 2
},
{
"source": "Marius",
"target": "Eponine",
"value": 5
},
{
"source": "Marius",
"target": "Gavroche",
"value": 4
},
{
"source": "BaronessT",
"target": "Gillenormand",
"value": 1
},
{
"source": "BaronessT",
"target": "Marius",
"value": 1
},
{
"source": "Mabeuf",
"target": "Marius",
"value": 1
},
{
"source": "Mabeuf",
"target": "Eponine",
"value": 1
},
{
"source": "Mabeuf",
"target": "Gavroche",
"value": 1
},
{
"source": "Enjolras",
"target": "Marius",
"value": 7
},
{
"source": "Enjolras",
"target": "Gavroche",
"value": 7
},
{
"source": "Enjolras",
"target": "Javert",
"value": 6
},
{
"source": "Enjolras",
"target": "Mabeuf",
"value": 1
},
{
"source": "Enjolras",
"target": "Valjean",
"value": 4
},
{
"source": "Combeferre",
"target": "Enjolras",
"value": 15
},
{
"source": "Combeferre",
"target": "Marius",
"value": 5
},
{
"source": "Combeferre",
"target": "Gavroche",
"value": 6
},
{
"source": "Combeferre",
"target": "Mabeuf",
"value": 2
},
{
"source": "Prouvaire",
"target": "Gavroche",
"value": 1
},
{
"source": "Prouvaire",
"target": "Enjolras",
"value": 4
},
{
"source": "Prouvaire",
"target": "Combeferre",
"value": 2
},
{
"source": "Feuilly",
"target": "Gavroche",
"value": 2
},
{
"source": "Feuilly",
"target": "Enjolras",
"value": 6
},
{
"source": "Feuilly",
"target": "Prouvaire",
"value": 2
},
{
"source": "Feuilly",
"target": "Combeferre",
"value": 5
},
{
"source": "Feuilly",
"target": "Mabeuf",
"value": 1
},
{
"source": "Feuilly",
"target": "Marius",
"value": 1
},
{
"source": "Courfeyrac",
"target": "Marius",
"value": 9
},
{
"source": "Courfeyrac",
"target": "Enjolras",
"value": 17
},
{
"source": "Courfeyrac",
"target": "Combeferre",
"value": 13
},
{
"source": "Courfeyrac",
"target": "Gavroche",
"value": 7
},
{
"source": "Courfeyrac",
"target": "Mabeuf",
"value": 2
},
{
"source": "Courfeyrac",
"target": "Eponine",
"value": 1
},
{
"source": "Courfeyrac",
"target": "Feuilly",
"value": 6
},
{
"source": "Courfeyrac",
"target": "Prouvaire",
"value": 3
},
{
"source": "Bahorel",
"target": "Combeferre",
"value": 5
},
{
"source": "Bahorel",
"target": "Gavroche",
"value": 5
},
{
"source": "Bahorel",
"target": "Courfeyrac",
"value": 6
},
{
"source": "Bahorel",
"target": "Mabeuf",
"value": 2
},
{
"source": "Bahorel",
"target": "Enjolras",
"value": 4
},
{
"source": "Bahorel",
"target": "Feuilly",
"value": 3
},
{
"source": "Bahorel",
"target": "Prouvaire",
"value": 2
},
{
"source": "Bahorel",
"target": "Marius",
"value": 1
},
{
"source": "Bossuet",
"target": "Marius",
"value": 5
},
{
"source": "Bossuet",
"target": "Courfeyrac",
"value": 12
},
{
"source": "Bossuet",
"target": "Gavroche",
"value": 5
},
{
"source": "Bossuet",
"target": "Bahorel",
"value": 4
},
{
"source": "Bossuet",
"target": "Enjolras",
"value": 10
},
{
"source": "Bossuet",
"target": "Feuilly",
"value": 6
},
{
"source": "Bossuet",
"target": "Prouvaire",
"value": 2
},
{
"source": "Bossuet",
"target": "Combeferre",
"value": 9
},
{
"source": "Bossuet",
"target": "Mabeuf",
"value": 1
},
{
"source": "Bossuet",
"target": "Valjean",
"value": 1
},
{
"source": "Joly",
"target": "Bahorel",
"value": 5
},
{
"source": "Joly",
"target": "Bossuet",
"value": 7
},
{
"source": "Joly",
"target": "Gavroche",
"value": 3
},
{
"source": "Joly",
"target": "Courfeyrac",
"value": 5
},
{
"source": "Joly",
"target": "Enjolras",
"value": 5
},
{
"source": "Joly",
"target": "Feuilly",
"value": 5
},
{
"source": "Joly",
"target": "Prouvaire",
"value": 2
},
{
"source": "Joly",
"target": "Combeferre",
"value": 5
},
{
"source": "Joly",
"target": "Mabeuf",
"value": 1
},
{
"source": "Joly",
"target": "Marius",
"value": 2
},
{
"source": "Grantaire",
"target": "Bossuet",
"value": 3
},
{
"source": "Grantaire",
"target": "Enjolras",
"value": 3
},
{
"source": "Grantaire",
"target": "Combeferre",
"value": 1
},
{
"source": "Grantaire",
"target": "Courfeyrac",
"value": 2
},
{
"source": "Grantaire",
"target": "Joly",
"value": 2
},
{
"source": "Grantaire",
"target": "Gavroche",
"value": 1
},
{
"source": "Grantaire",
"target": "Bahorel",
"value": 1
},
{
"source": "Grantaire",
"target": "Feuilly",
"value": 1
},
{
"source": "Grantaire",
"target": "Prouvaire",
"value": 1
},
{
"source": "MotherPlutarch",
"target": "Mabeuf",
"value": 3
},
{
"source": "Gueulemer",
"target": "Thenardier",
"value": 5
},
{
"source": "Gueulemer",
"target": "Valjean",
"value": 1
},
{
"source": "Gueulemer",
"target": "Mme.Thenardier",
"value": 1
},
{
"source": "Gueulemer",
"target": "Javert",
"value": 1
},
{
"source": "Gueulemer",
"target": "Gavroche",
"value": 1
},
{
"source": "Gueulemer",
"target": "Eponine",
"value": 1
},
{
"source": "Babet",
"target": "Thenardier",
"value": 6
},
{
"source": "Babet",
"target": "Gueulemer",
"value": 6
},
{
"source": "Babet",
"target": "Valjean",
"value": 1
},
{
"source": "Babet",
"target": "Mme.Thenardier",
"value": 1
},
{
"source": "Babet",
"target": "Javert",
"value": 2
},
{
"source": "Babet",
"target": "Gavroche",
"value": 1
},
{
"source": "Babet",
"target": "Eponine",
"value": 1
},
{
"source": "Claquesous",
"target": "Thenardier",
"value": 4
},
{
"source": "Claquesous",
"target": "Babet",
"value": 4
},
{
"source": "Claquesous",
"target": "Gueulemer",
"value": 4
},
{
"source": "Claquesous",
"target": "Valjean",
"value": 1
},
{
"source": "Claquesous",
"target": "Mme.Thenardier",
"value": 1
},
{
"source": "Claquesous",
"target": "Javert",
"value": 1
},
{
"source": "Claquesous",
"target": "Eponine",
"value": 1
},
{
"source": "Claquesous",
"target": "Enjolras",
"value": 1
},
{
"source": "Montparnasse",
"target": "Javert",
"value": 1
},
{
"source": "Montparnasse",
"target": "Babet",
"value": 2
},
{
"source": "Montparnasse",
"target": "Gueulemer",
"value": 2
},
{
"source": "Montparnasse",
"target": "Claquesous",
"value": 2
},
{
"source": "Montparnasse",
"target": "Valjean",
"value": 1
},
{
"source": "Montparnasse",
"target": "Gavroche",
"value": 1
},
{
"source": "Montparnasse",
"target": "Eponine",
"value": 1
},
{
"source": "Montparnasse",
"target": "Thenardier",
"value": 1
},
{
"source": "Toussaint",
"target": "Cosette",
"value": 2
},
{
"source": "Toussaint",
"target": "Javert",
"value": 1
},
{
"source": "Toussaint",
"target": "Valjean",
"value": 1
},
{
"source": "Child1",
"target": "Gavroche",
"value": 2
},
{
"source": "Child2",
"target": "Gavroche",
"value": 2
},
{
"source": "Child2",
"target": "Child1",
"value": 3
},
{
"source": "Brujon",
"target": "Babet",
"value": 3
},
{
"source": "Brujon",
"target": "Gueulemer",
"value": 3
},
{
"source": "Brujon",
"target": "Thenardier",
"value": 3
},
{
"source": "Brujon",
"target": "Gavroche",
"value": 1
},
{
"source": "Brujon",
"target": "Eponine",
"value": 1
},
{
"source": "Brujon",
"target": "Claquesous",
"value": 1
},
{
"source": "Brujon",
"target": "Montparnasse",
"value": 1
},
{
"source": "Mme.Hucheloup",
"target": "Bossuet",
"value": 1
},
{
"source": "Mme.Hucheloup",
"target": "Joly",
"value": 1
},
{
"source": "Mme.Hucheloup",
"target": "Grantaire",
"value": 1
},
{
"source": "Mme.Hucheloup",
"target": "Bahorel",
"value": 1
},
{
"source": "Mme.Hucheloup",
"target": "Courfeyrac",
"value": 1
},
{
"source": "Mme.Hucheloup",
"target": "Gavroche",
"value": 1
},
{
"source": "Mme.Hucheloup",
"target": "Enjolras",
"value": 1
}
]
}
\ No newline at end of file
src/view/Manage/Map/MapContent.jsx deleted 100644 → 0
import React from 'react';
import { Row, Col, Breadcrumb, Select, Typography, List } from 'antd';
import { HomeOutlined } from '@ant-design/icons';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import VList from 'react-virtualized/dist/commonjs/List';
import InfiniteLoader from 'react-virtualized/dist/commonjs/InfiniteLoader';
import SquareItem from './Component/SquareItem';
import Org from './Component/Org';
import Tree from './Component/Tree';
import Relation from './Component/Relation';
import { dispatch, dispatchLatest } from '../../../model';
const column = 4;
const defaultLoadCount = 10;
class MapContent extends React.Component {
constructor(props) {
super(props);
this.state = {
curTableModelData: null,
orgModelData: null,
orgChildData: null,
treeModelData: null,
treeChildData: null,
relationModelData: null,
relationChildData: null,
parentNodeId: null,
breadcrumbContents: null,
currentLevel: -1,
totalLevel: 1,
haveMoreData: false,
};
}
loadedRowsMap = {};
componentDidMount() {
this.getTreeTotalLevelThenQueryAllDirectoryAsTreeByDirLevel();
}
componentDidUpdate(prevProps, prevState) {
const { type, topic } = this.props;
const { currentLevel } = this.state;
if (topic !== prevProps.topic) {
this.setState({ curTableModelData: [], parentNodeId: null, orgModelData: null, treeModelData: null, relationModelData: null }, () => {
this.getTreeTotalLevelThenQueryAllDirectoryAsTreeByDirLevel();
})
} else if (type !== prevProps.type) {
this.setState({ parentNodeId: null, orgModelData: null, treeModelData: null, relationModelData: null }, () => {
if (type !== 'square') {
this.getTreeTotalLevelThenQueryAllDirectoryAsTreeByDirLevel(false, currentLevel);
}
});
}
}
getTreeTotalLevelThenQueryAllDirectoryAsTreeByDirLevel = (first=true, defaultCurrentLevel=-1) => {
const { topic } = this.props;
dispatch({
type: 'map.getTreeTotalLevel',
payload: { dirId: topic.id },
callback: data => {
const _totalLevel = Number(data);
const _currentLevel = (defaultCurrentLevel===-1) ? (_totalLevel < 3 ? _totalLevel : 3) : defaultCurrentLevel;
this.setState({ totalLevel: _totalLevel, currentLevel: _currentLevel }, () => {
this.queryAllDirectoryAsTreeByDirLevel(first, _currentLevel - 1);
});
}
})
}
queryAllDirectoryAsTreeByDirLevel = (first, level) => {
const { topic } = this.props;
dispatchLatest({
type: 'map.queryAllDirectoryAsTreeByDirLevel',
payload: {
dirId: topic.id,
dirLevel: level,
topNum: defaultLoadCount
},
callback: data => {
const _treeData = {
text: topic.name || '',
name: topic.name || '',
dirId: topic.id,
id: `d${topic.id}`,
dbType: 'Dir',
children: (data||[]).length===0 ? null : data
};
this.convertRemoteData(_treeData.children||[], _treeData.id, _treeData.dirId);
const _curTableModelData = (_treeData.children||[]).filter(item => item.dbType!=='More');
if (first) {
this.loadedRowsMap = {};
this.setState({
curTableModelData: _curTableModelData,
breadcrumbContents: [{ data: _treeData }],
haveMoreData: (_curTableModelData||[]).length===defaultLoadCount,
//深拷贝
orgModelData: JSON.parse(JSON.stringify(_treeData)),
treeModelData: JSON.parse(JSON.stringify(_treeData)),
relationModelData: JSON.parse(JSON.stringify(_treeData))
});
} else {
this.setState({
orgModelData: JSON.parse(JSON.stringify(_treeData)),
treeModelData: JSON.parse(JSON.stringify(_treeData)),
relationModelData: JSON.parse(JSON.stringify(_treeData))
});
}
}
})
}
convertRemoteData = (data, pid, pDirId, start=0) => {
data.forEach((item, index) => {
item.pid = pid||'';
item.pDirId = pDirId||'';
item.index = (index+start);
if (item.dbType === 'Dir') {
item.text = item.name = item.dirName || '';
item.id = `d${pDirId}${item.dirId || ''}${index}`;
} else if (item.dbType === 'Table') {
item.text = item.name = item.cnName || '';
item.tid = item.id||'';
item.id = `t${pDirId}${item.id || ''}${index}`;
}
if (index === defaultLoadCount) {
item.text = item.name = '点击加载更多';
item.dbType = 'More';
}
if (item.children) {
this.convertRemoteData(item.children, item.id, item.dirId);
}
})
}
handleInfiniteOnLoad = ({ startIndex, stopIndex }) => {
const { haveMoreData, curTableModelData } = this.state;
for (let i = startIndex; i <= stopIndex; i++) {
this.loadedRowsMap[i] = 1;
}
if (haveMoreData) {
const lastItem = curTableModelData[curTableModelData.length-1];
dispatchLatest({
type: 'map.getTableModelInfoByDirIdAndBeginIndex',
payload: {
dirId: lastItem.pDirId,
beginIndex: Number(lastItem.index)+2,
topNum: defaultLoadCount
},
callback: data => {
this.convertRemoteData(data||[], '', lastItem.pDirId, Number(lastItem.index)+1);
const _data = (data||[]).filter(item => item.dbType!=='More');
this.setState({
curTableModelData: [...curTableModelData, ...(_data||[])],
haveMoreData: (_data||[]).length===defaultLoadCount,
});
}
})
}
};
isRowLoaded = ({ index }) => !!this.loadedRowsMap[index];
onSquareItemClick = (item) => {
const { breadcrumbContents } = this.state;
dispatchLatest({
type: 'map.getTableModelByDirIid',
payload: {
dirId: item.dirId,
topNum: defaultLoadCount
},
callback: data => {
this.loadedRowsMap = {};
this.convertRemoteData(data || [], item.id, item.dirId);
item.children = (data || []).filter(item => item.dbType!=='More');
this.setState({ curTableModelData: [] }, () => {
this.setState({
breadcrumbContents: [...breadcrumbContents, { name: item.dirName || '', data: item }],
curTableModelData: item.children || [],
haveMoreData: (item.children||[]).length===defaultLoadCount,
});
})
}
})
}
onBreadcrumbItemClick = (content, index) => {
const { breadcrumbContents } = this.state;
this.loadedRowsMap = {};
this.setState({
breadcrumbContents: breadcrumbContents.splice(0, index === 0 ? 1 : (index + 1)),
curTableModelData: []
}, () => {
const item = content.data;
dispatchLatest({
type: 'map.getTableModelByDirIid',
payload: {
dirId: item.dirId,
topNum: defaultLoadCount
},
callback: data => {
this.convertRemoteData(data || [], item.id, item.dirId);
item.children = (data || []).filter(item => item.dbType!=='More');
this.setState({
curTableModelData: item.children || [],
haveMoreData: (item.children||[]).length===defaultLoadCount,
});
}
})
})
}
loadSubLeafData = (dirId, nodeId) => {
this.setState({ parentNodeId: '' }, () => {
dispatchLatest({
type: 'map.getTableModelByDirIid',
payload: {
dirId,
topNum: defaultLoadCount
},
callback: data => {
this.convertRemoteData(data||[], nodeId, dirId);
this.setState({
parentNodeId: nodeId,
orgChildData: JSON.parse(JSON.stringify(data || [])),
treeChildData: JSON.parse(JSON.stringify(data || [])),
relationChildData: JSON.parse(JSON.stringify(data)),
});
}
})
})
}
loadMoreLeafData = (dirId, nodeId, start) => {
this.setState({ parentNodeId: '' }, () => {
dispatchLatest({
type: 'map.getTableModelInfoByDirIdAndBeginIndex',
payload: {
dirId,
beginIndex: Number(start)+1,
topNum: defaultLoadCount
},
callback: data => {
this.convertRemoteData(data||[], nodeId, dirId, start);
this.setState({
parentNodeId: nodeId,
orgChildData: JSON.parse(JSON.stringify(data || [])),
treeChildData: JSON.parse(JSON.stringify(data || [])),
relationChildData: JSON.parse(JSON.stringify(data)),
});
}
})
})
}
onLevelChange = (value) => {
this.setState({ currentLevel: value, parentNodeId: null, orgModelData: null, treeModelData: null, relationModelData: null }, () => {
this.queryAllDirectoryAsTreeByDirLevel(false, value - 1);
});
}
onAssetClick = (id) => {
}
renderItem = ({ index, key, style }) => {
const { curTableModelData } = this.state;
const group = curTableModelData.slice(index*column, index*column+column);
return (
<List.Item key={key} style={style}>
<div style={{ width: '100%' }}>
<Row gutter={30} style={{ padding: '0 2px' }}>
{
group && group.map((item, index) => {
return (
<Col key={index} span={24 / column}
>
<SquareItem item={item} onClick={this.onSquareItemClick} {...this.props} />
</Col>
)
})
}
</Row>
</div>
</List.Item>
);
};
render() {
const { type, switchMode } = this.props;
const { curTableModelData, breadcrumbContents, orgModelData, treeModelData, relationModelData, orgChildData, treeChildData, relationChildData, parentNodeId, currentLevel, totalLevel } = this.state;
let groups = [];
if (curTableModelData) {
for (var i = 0; i < curTableModelData.length; i += column) {
groups.push(curTableModelData.slice(i, i + column));
}
}
if (type === 'square') {
return (
<div className='p-3' style={{ height: '100%', backgroundColor: '#fff' }}>
{
type === 'square' && <>
<div className="flex mb-3">
<div className='flex-auto'>
{
breadcrumbContents && breadcrumbContents.length > 0 && <Breadcrumb >
{
breadcrumbContents.map((content, index) => {
return (
<Breadcrumb.Item key={index}>
{
index === 0 ? <HomeOutlined onClick={() => { this.onBreadcrumbItemClick(content, index); }} /> : ((index === breadcrumbContents.length - 1) ? <span>{content.name || ''}</span> : <span className='pointer' onClick={() => { this.onBreadcrumbItemClick(content, index); }}>
{content.name || ''}
</span>)
}
</Breadcrumb.Item>
)
})
}
</Breadcrumb>
}
</div>
<div className="flex">
{switchMode}
</div>
</div>
{
(curTableModelData||[]).length>0 && <InfiniteLoader
isRowLoaded={this.isRowLoaded}
loadMoreRows={this.handleInfiniteOnLoad}
rowCount={groups.length}>
{({onRowsRendered, registerChild}) => (
<AutoSizer>
{({width, height}) => (
<VList
ref={registerChild}
height={height - 34}
onRowsRendered={onRowsRendered}
rowCount={groups.length}
rowHeight={134}
rowRenderer={this.renderItem}
width={width}
/>
)}
</AutoSizer>
)}
</InfiniteLoader>
}
</>
}
</div>
);
} else {
return (
<div className='position-relative' style={{ height: '100%', overflow: 'hidden', backgroundColor: '#fff'
//backgroundImage: 'linear-gradient(to bottom left,#2e3b4e,#0d0d13 52%,#0d0d13)'
}}>
{
type === 'org' && <Org
data={orgModelData}
parentNodeId={parentNodeId}
childData={orgChildData}
loadMoreLeafData={this.loadMoreLeafData}
loadSubLeafData={this.loadSubLeafData}
onAssetClick={this.onAssetClick}
styles={{ width: '100%', height: '100%' }}
/>
}
{
type === 'tree' && <Tree
data={treeModelData}
parentNodeId={parentNodeId}
childData={treeChildData}
loadMoreLeafData={this.loadMoreLeafData}
loadSubLeafData={this.loadSubLeafData}
onAssetClick={this.onAssetClick}
styles={{ width: '100%', height: '100%' }}
/>
}
{
type === 'relation' && <Relation
data={relationModelData}
parentNodeId={parentNodeId}
childData={relationChildData}
loadMoreLeafData={this.loadMoreLeafData}
loadSubLeafData={this.loadSubLeafData}
onAssetClick={this.onAssetClick}
styles={{ width: '100%', height: '100%' }}
/>
}
<div
className='position-absolute text-right p-3'
style={{
display: 'block',
right: 0,
top: 0
}}
>
{switchMode}
<div className="mt-3">
<Typography.Text className="mr-2" style={{ color: '#000' }}>层数</Typography.Text>
{/* <Slider vertical min={1} max={totalLevel} value={currentLevel} onChange={this.onLevelChange} /> */}
<Select value={currentLevel} onChange={this.onLevelChange} size="small">
{Array.from(new Array(totalLevel)).map((_, i) => <Select.Option key={(i+1)} value={(i+1)}>{(i+1)}</Select.Option>)}
</Select>
</div>
</div>
{/* <div id="left-control-container"></div>
<div id="right-control-container"></div>
<div id="bottom-bg-container"></div> */}
</div>
)
}
}
}
export default MapContent;
\ No newline at end of file
src/view/Manage/Map/index.jsx deleted 100644 → 0
import React from 'react';
import { Spin, Radio, Tooltip, Tag } from 'antd';
import MapContent from './MapContent';
import { dispatchLatest } from '../../../model';
import './index.less';
const { CheckableTag } = Tag;
const graphModes = [
{
title: '方块图',
key: 'square'
},
{
title: '组织图',
key: 'org',
},
{
title: '树形图',
key: 'tree',
},
{
title: '关系图',
key: 'relation'
}
];
class Map extends React.Component {
constructor(props) {
super(props);
this.state = {
type: 'square',
tabKey: '',
loadingTopics: false,
resourceTopics: null,
assetTopics: null,
selectedTopic: {}
};
}
componentDidMount() {
this.setState({ loadingTopics: true }, () => {
dispatchLatest({
type: 'map.getAllTopics',
payload: null,
callback: data => {
this.setState({
loadingTopics: false,
resourceTopics: (data||[]).filter(item=>(item.code==='001'||item.code==='002')),
assetTopics: (data||[]).filter(item=>(item.code!=='001'&&item.code!=='002')),
selectedTopic: (data||[]).length>0?data[0]:{}
});
},
error: () => {
this.setState({ loadingTopics: false });
}
})
})
}
onTypeChange = e => {
this.setState({ type: e.target.value });
};
onTabChange = activeKey => {
this.setState({ tabKey: activeKey });
}
onTagChange = (item, checked) => {
if (checked) {
this.setState({ selectedTopic: item });
}
}
render() {
const { type, resourceTopics, assetTopics, loadingTopics, selectedTopic } = this.state;
const switchMode = <div className=''>
<Radio.Group
value={type}
onChange={this.onTypeChange} size="small"
>
{
graphModes && graphModes.map((mode, index) => {
return (
<Tooltip key={index} title={mode.title || ''} >
<Radio.Button value={mode.key}>{(mode.title || '').substring(0, 1)}</Radio.Button>
</Tooltip>
);
})
}
</Radio.Group>
</div>
return (
<div className='asset-map' style={{ backgroundColor: '#fff' }}>
{
loadingTopics ? <Spin /> : <>
<div
className='flex'
style={{
alignItems: 'center',
justifyContent: 'space-between',
height: 64,
borderBottom: '1px solid #f0f0f0',
margin: '0px 10px'
}}
>
<div>
<span>数据资源: </span>
{
resourceTopics && resourceTopics.map(item => {
return (
<CheckableTag
key={item.id}
checked={selectedTopic?.id===item.id}
onChange={checked => this.onTagChange(item, checked)}
>
{item.name}
</CheckableTag>
);
})
}
</div>
<div>
<span>数据资产: </span>
{
assetTopics && assetTopics.map(item => {
return (
<CheckableTag
key={item.id}
checked={selectedTopic?.id===item.id}
onChange={checked => this.onTagChange(item, checked)}
>
{item.name}
</CheckableTag>
);
})
}
</div>
</div>
<div className='map-container' >
<MapContent type={type} topic={selectedTopic} switchMode={switchMode} {...this.props} />
</div>
</>
}
</div>
);
}
}
export default Map;
\ No newline at end of file
src/view/Manage/Map/index.less deleted 100644 → 0
@import '../../../variables.less';
.asset-map {
height: calc(100vh - @header-height - @pm-4);
.yy-tag {
font-size: 14px;
margin-right: 2px;
}
.map-container {
height: calc(100vh - @header-height - @pm-4 - 64px) !important;
overflow: auto !important;
}
}
\ No newline at end of file
src/view/Manage/index.jsx
...@@ -6,7 +6,6 @@ import { GetSession } from "../../util"; ...@@ -6,7 +6,6 @@ import { GetSession } from "../../util";
import { ManageLayout } from "../../layout"; import { ManageLayout } from "../../layout";
import DatasourceManage from './DatasourceManage'; import DatasourceManage from './DatasourceManage';
import Map from './Map';
import Model from './Model'; import Model from './Model';
import ModelConfig from './ModelConfig'; import ModelConfig from './ModelConfig';
import AssetManage from './AssetManage'; import AssetManage from './AssetManage';
...@@ -30,7 +29,6 @@ class Manage extends Component { ...@@ -30,7 +29,6 @@ class Manage extends Component {
<Route path={`${match.path}/datasource-manage`} component={DatasourceManage} /> <Route path={`${match.path}/datasource-manage`} component={DatasourceManage} />
<Route path={`${match.path}/data-model`} component={Model} /> <Route path={`${match.path}/data-model`} component={Model} />
<Route path={`${match.path}/model-config`} component={ModelConfig} /> <Route path={`${match.path}/model-config`} component={ModelConfig} />
<Route path={`${match.path}/asset-map`} component={Map} />
<Route path={`${match.path}/asset-manage`} component={AssetManage} /> <Route path={`${match.path}/asset-manage`} component={AssetManage} />
<Route path={`${match.path}/asset-resource-browse`} component={AssetResourceBrowse} /> <Route path={`${match.path}/asset-resource-browse`} component={AssetResourceBrowse} />
<Route path={`${match.path}/asset-browse`} component={AssetBrowse} /> <Route path={`${match.path}/asset-browse`} component={AssetBrowse} />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment