效果
代码
<html>
<head>
<title>TWaver HTML5</title>
<script src="../twaver.js"></script>
</head>
<body onl oad="init()">
<button style="position: absolute; z-index: 10">click</button>
<script>
/**
* 多种布局，卡bug流程：
* 先进行指定位置布局，再将布局后的localtion 存储，再将新的布局加入
* **/
var box = new twaver.ElementBox();
var myselectionModel1;
var autoLayouter;
var network;
var r = 350; // 布局的环形大小
function getNodePositon(n, r) {
var angle = (2 * Math.PI) / n;
var sumAngle = 0;
var arr = [];
for (var i = 0; i < n; i++) {
var x = r * Math.sin(sumAngle);
var y = r * Math.cos(sumAngle);
sumAngle += angle;
var obj = {
x: x,
y: y,
};
arr.push(obj);
}
return arr;
}
var items = [
"round",
"symmetry",
"topbottom",
"bottomtop",
"leftright",
"rightleft",
"hierarchic",
];
function init() {
twaver.Util.registerImage("circle", {
w: 10,
h: 10,
line: {
width: 1,
color: twaver.Colors.orange_dark,
},
fill: twaver.Colors.orange_dark,
v: [
{
shape: "circle",
cx: 0,
cy: 0,
r: 5,
},
],
});
network = new twaver.vector.Network(box);
twaver.Styles.setStyle("link.color", twaver.Colors.blue_light);
twaver.Styles.setStyle("link.", twaver.Colors.blue_light);
network.setMinZoom(0.0001);
autoLayouter = new twaver.layout.AutoLayouter(box);
autoLayouter.setRepulsion(0.4);
autoLayouter.setAnimate(false);
network.adjustBounds({ x: 0, y: 0, width: 1000, height: 1000 });
document.body.appendChild(network.getView());
}
var clickCount = 1; // 鼠标点击次数的累加器
var button = document.querySelector("button");
// 点击添加事件
button.addEventListener("click", () => {
// 自适应组数量扩展
if (clickCount % 10 == 0) r += 150;
var o; // 原点，为了连接link
var n = parseInt(Math.random() * (6 - 0 + 1) + 0, 10); // 生成 0-6 的随机数
var group = new twaver.Group({ name: `group-${clickCount}` });
var position;
group.setExpanded(true); // 设置组默认展开
box.add(group);
group.s("group.fill", false); // 去除组的底色
group.s("group.outline.width", 0); // 去除边线的宽度
group.s("group.deep", 0); // 设置组的深度
// group.s("group.outline.color", "white"); // 设置边线的颜色
// group.fill("false"); // 去除填充
group.setClient("type", `group-${clickCount}`); // 设置自定义属性
group.setClient("group", "1"); // 设置自定义属性
// 生成节点以及连线
for (let i = 0; i < 11; i++) {
var node = new twaver.Node();
node.setImage("circle");
node.setName(`node-${i}`);
node.setClient("autoLayouter", items[n]);
node.setClient("type", `group-${clickCount}`);
if (i > 0) {
var link = new twaver.Link(o, node);
link.setClient("autoLayouter", items[n]);
link.setClient("type", `group-${clickCount}`);
box.add(link);
group.addChild(link);
} else {
o = node;
}
box.add(node);
group.addChild(node);
}
globalLayout();
clickCount++;
// 全局布局;
function globalLayout() {
var position = getNodePositon(clickCount, r);
var i = 0;
box.forEach((e) => {
if (e.getClient("group") == "1") {
e.setLocation({ x: position[i].x, y: position[i].y });
e.setExpanded(true);
i++;
}
});
localLayout(position);
}
// 遍历所有组，进行组内布局
function localLayout(position) {
var m = items[0]; // 当前组的布局模式
for (let j = 0; j < clickCount; j++) {
autoLayouter.getElements = function () {
var elements = new twaver.List();
box.forEach((e) => {
if (e.getClient("type") == `group-${clickCount}`) {
m = e.getClient("autoLayouter");
elements.add(e);
}
});
return elements;
};
autoLayouter.doLayout(m, () => {
// 设置最后一个组的位置及展开状态
var len = position.length - 1;
group.setLocation({
x: position[len].x,
y: position[len].y,
});
group.setExpanded(true);
return false;
});
}
}
});
</script>
</body>
</html>