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では、デフォルトのハイライトが変更されました。要素を強調表示すると、要素形状を模倣するクラス名joint-highlight-strokeのSVGPathElementがElementViewに直接追加されます。これにより、ブラウザ間の相違が解決され、CSSプロパティoutlineはSVG要素ではほとんどサポートされていません。

利用可能

highlightersjoint.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リポジトリにできるだけ早く表示されます。

出典

2016-07-15 16:59:10 Roman

CellView.highlight（）に変更がありますか？

答えて

関連する問題