复习 Paper & Graph
Paper 是渲染我们提供的数据的，表示的是视图层（View）。数据和逻辑在 Graph 中操作，表示的是数据层和控制层（Model & Controller）。
在 Graph 中，有两个基本的图形——Element 和 Link。Element 是我们视图层所看到的可以控制、移动等操作的元素（椭圆、圆形、矩形等）；Link 就是链接这些元素的线条。
JointJS 在 H5 中的效果全都是一组 g 标签，g 下面有 SVG 的基本图形：text、rect、circle 等。
tip:[start]在 JointJS 中，我们可以把一个图形理解成一个 g 标签，或者说一个容器。容器下面许多的子图形，而我们 define 函数定义的就是一个容器，其下有许多的子图形。tip:[end]
Paper 事件
Paper 事件是在视图中监听我们的鼠标点击，包括：pointerdown、double click、right click。更多的事件查阅文档：dia.Paper.events。
Paper 事件是用户与画布进行交互时的事件，用我的理解就是 Paper 的事件针对的是 Paper（视图），当用户双击某个元素时，不会具体知道哪一个元素，只要是我们双击了图形元素，就会触发 Paper 的事件。
Paper 事件就有点像 Vue3 中的 watchEffect，监听的是组件内所有响应式数据的状态变化，只要其中一个被触发了就会调用 watchEffect 函数，Paper 事件也是一样的。
比如：当用户双击视图上的某个元素时：
var rect = new joint.shapes.standard.Rectangle();
rect.position(100, 30);
rect.resize(100, 40);
rect.attr({
body: {
cursor: "pointer",
fill: "white",
stoke: "black"
},
label: {
text: "Element #1",
cursor: "pointer",
fill: "black"
}
});
rect.addTo(graph);
var rect2 = rect.clone();
rect2.translate(300, 0);
rect2.attr("label/text", "Element #2");
rect2.addTo(graph);
var link = new joint.shapes.standard.Link();
link.source(rect);
link.target(rect2);
link.attr({
line: {
stroke: "black"
}
});
link.labels([
{
markup: [
{
tagName: "rect",
selector: "body"
},
{
tagName: "text",
selector: "label"
}
],
attrs: {
label: {
cursor: "pointer",
text: "Link",
textAnchor: "middle",
textVerticalAnchor: "middle",
fontSize: 12,
fill: "black"
},
body: {
cursor: "pointer",
ref: "label",
refX: "-10%",
refY: "-10%",
refWidth: "120%",
refHeight: "120%",
fill: "white",
stroke: "black",
strokeWidth: 2
}
}
}
]);
link.addTo(graph);
var info = new joint.shapes.standard.Rectangle();
info.position(250, 70);
info.resize(100, 20);
info.attr({
body: {
visibility: "hidden",
cursor: "default",
fill: "white",
stoke: "black"
},
label: {
visibility: "hidden",
text: "Link clicked",
cursor: "default",
fill: "black",
fontSize: 12
}
});
info.addTo(graph);
paper.on("element:pointerdblclick", function (elementView) {
console.log("element", elementView);
resetAll(this);
var currentElement = elementView.model;
currentElement.attr("body/stroke", "orange");
});
function resetAll(paper) {
paper.drawBackground({
color: "white"
});
var elements = paper.model.getElements();
for (var i = 0, ii = elements.length; i < ii; i++) {
var currentElement = elements[i];
currentElement.attr("body/stroke", "black");
}
var links = paper.model.getLinks();
for (var j = 0, jj = links.length; j < jj; j++) {
var currentLink = links[j];
currentLink.attr("line/stroke", "black");
currentLink.label(0, {
attrs: {
body: {
stroke: "black"
}
}
});
}
}