复习 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"
        }
      }
    });
  }
}

Graph 事件