How to highlight all element relative to a cell on diagram when using jointjs

[亡魂溺海] 提交于 2019-12-13 07:37:56

问题


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.



来源:https://stackoverflow.com/questions/47591189/how-to-highlight-all-element-relative-to-a-cell-on-diagram-when-using-jointjs

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!