How to highlight all element relative to a cell on

问题:

I'm implementing a task relative to draw the diagram. It requires that when the user hovers on a cell of the diagram, it will highlight all preceding and subsequent of that cell and links. I found just how to highlight one element by clicking it. And not sure can I highlight links. Is it possible to do?

回答1:

I have solved it in this way:

    this.listenTo(this.options.paper, 'cell:mouseover', function (cellView) {
      const links = this.options.paper.model.getConnectedLinks(cellView.model, {deep: true});
      const neighbours = this.options.paper.model.getNeighbors(cellView.model);

      cellView.highlight();

      neighbours.forEach((element) => {
        const viewElement = this.options.paper.findViewByModel(element);
        viewElement.highlight();
      });

      links.forEach((link) => {
        const viewLink = this.options.paper.findViewByModel(link);
        viewLink.highlight();
      });
    });

回答2:

Links and elements inherit from cell. Cells are backbone models that have associated cellViews. The cellView is a backbone view, where the highlight method resides. LinkView is the specific view for links, it inherits from CellView. CellViews default 'highlight' method works fine for rectangular cells, but for links it's not so good as the highlight is a right angle rectangle bounding box around the entire link.

The highlight method takes two parameters, the second of which allows you to specify the type of highlight. This is documented here. One of the 'types' allowed is where you can specify a css class. You can define a class, and specify it here.

If that isn't enough, another option would be to extend linkView, and implement your own 'highlight' methods on that. Then provide this new linkView to the paper constructor as a template.