CellView.highlight() 변경 내용이 변경 되었습니까?

내 응용 프로그램에서 Jointjs를 사용합니다.CellView.highlight() 변경 내용이 변경 되었습니까?

최근에 Jointjs v0.9.7에서 v0.9.10으로 업그레이드되었으며 그 셀 강조 표시가 작동하지 않는 것으로 보았습니다. 나는 모든 것을 테스트 애플리케이션으로 단순화 시켰고 highlight() 함수가 호출되었지만 highlighted 클래스가 설정되지 않았다는 것을 알 수있다.

a gist 및 a fiddle에 간단한 테스트 페이지를 넣었습니다. 도움이 될 수 있도록 아래에 재현되어 있습니다.

급격한 변화가 있었습니까? 하이라이트는 v.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에서 기본 형광펜이 변경되었습니다. 요소를 강조 표시하면 요소 모양을 모방 한 joint-highlight-stroke 클래스 이름을 가진 SVGPathElement가 ElementView에 직접 추가됩니다. 이렇게하면 CSS 속성 outline이 대부분 SVG 요소에 대해 지원되지 않는 브라우저 간의 차이점을 해결할 수 있습니다. 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);

새로운 변경 사항으로 인해 여러 형광펜이있는 셀 뷰가 강조 표시됩니다.

Demo

불편을 드려 죄송합니다. 하이 라이터에 대한 실제 문서는 JointJS 저장소에 최대한 빨리 나타납니다.

출처

2016-07-15 16:59:10 Roman

CellView.highlight() 변경 내용이 변경 되었습니까?

답변

관련 문제