CellView.highlight() нарушение изменения?

В моем приложении используется Jointjs.CellView.highlight() нарушение изменения?

Недавно я обновился от Jointjs v0.9.7 до v0.9.10, и поскольку я сделал выделение этой ячейки, похоже, не работает. Я упростил все до тестового приложения, и я вижу, что функция highlight() вызывается, но класс highlighted не установлен.

Я поставил упрощенную тестовую страницу в a gist и a fiddle. Он также воспроизводится ниже, если он помогает.

Произошло ли нарушение? Как подсветка должна работать в 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>

источник

2016-07-13 Mike Goodwin

Исключительный маркер по умолчанию изменился в JointJS v0.9.10. Когда вы выделяете элемент - SVGPathElement с именем joint-highlight-stroke, который имитирует форму элемента, добавляется непосредственно в ElementView. Это решает различия между браузерами с свойством CSS outline, в основном неподдерживаемым для SVG Elements.

Доступные highlighters находится в joint.highlighters имен (strokeпо умолчанию, opacity, addClassдля обратной совместимости).

Чтобы восстановить исходное поведение, используйте следующее.

// 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);

Обратите внимание, что новые изменения позволяют выделять cellView с несколькими маркерами.

Demo

Извините за неудобства. Фактическая документация для маркеров появится в репозитории JointJS ASAP.

источник

2016-07-15 16:59:10 Roman

ответ

Смежные вопросы