CellView.highlight() breaking change?

问题

My application uses Jointjs.

I recently upgraded from Jointjs v0.9.7 to v0.9.10 and since I did that cell highlighting does not seem to work. I simplified everything down to a test app and I can see that the highlight() function is called but the highlighted class is not set.

I put a simplified test page into a gist and a fiddle. It is also reproduced below in case it helps.

Has there been a breaking change? How is highlighting supposed to work in v0.9.10?

<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.10/joint.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.10/joint.core.css" />
</head>

<body>
    <div id="paper" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.10/joint.js"></script>
    <script>
        //there is a problem with jointjs in the latest version of Chrome. This fixes it
        SVGElement.prototype.getTransformToElement =
            SVGElement.prototype.getTransformToElement || function (toElement) {
                return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
            };

        var highlighted = false;

        var graph = new joint.dia.Graph;
        var paper = new joint.dia.Paper({
            el: $('#paper'),
            width: 400,
            height: 400,
            model: graph,
            gridSize: 1,
            interactive: false
        });

        paper.on('cell:pointerclick', function (cellView) {

            if (highlighted) {
                cellView.unhighlight();
            } else {
                cellView.highlight();
            }

            highlighted = !highlighted
        });

        var element = new joint.shapes.basic.Rect({
            position: { x: 100, y: 30 },
            attrs: { text: { text: 'my shape' } },
            size: { height: 92.7051, width: 150 }
        });

        graph.addCell(element);
    </script>
</body>

</html>

回答1:

The default highlighter has changed in JointJS v0.9.10. When you highlight an element - an SVGPathElement with the joint-highlight-stroke class name that mimics the element shape is appended directly to the ElementView. This solves differences across the browsers with CSS property outline mostly unsupported for SVG Elements.

Available highlighters resides in the joint.highlighters namespace (stroke default, opacity, addClass for backwards compatibility).

In order to restore the original behaviour, please use the following.

// a highlighter definition
var myHighlighter = {
    name: 'addClass',
    options: {
        className: 'highlighted'
    }
}

// add `myHighlighter` to an `el` (`null` for the entire cellView) DOM element.
cellView.highlight(el, myHighlighter);
// remove `myHighlighter` from an `el` DOM element.
cellView.unhighlight(el, myHighlighter);

Note that the new changes allow highlighting cellViews with multiple highlighters.

Demo

Sorry for inconveniences. The actual documentation for highlighters will appear in the JointJS repository ASAP.

来源：https://stackoverflow.com/questions/38361870/cellview-highlight-breaking-change

标签

javascript

jointjs