From 7a63386fb49ca184d79438b1ae922caeada4d5db Mon Sep 17 00:00:00 2001
From: Max Franz <maxkfranz@gmail.com>
Date: Fri, 30 Jan 2015 15:28:39 -0500
Subject: [PATCH]  Edge and arrow not correctly rendered after changing width
 style property #799

---
 debug/init.js                                 | 19 ++++++++++++-------
 .../renderer.canvas.coord-ele-math.js         |  5 +++++
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/debug/init.js b/debug/init.js
index 0eca61ca28..edbb9d4510 100644
--- a/debug/init.js
+++ b/debug/init.js
@@ -4,8 +4,12 @@ require(['cytoscape'], function(rjsCy){
 
 $(function(){
 
-  var addRandomEles = true;        
+  var addRandomEles = false;        
   var height, width;
+
+  var cliques = 2;
+  var numNodes = 40;
+  var numEdges = 120;
   
   var defaultSty = window.defaultSty = cytoscape.stylesheet()
       // .selector('node, edge')
@@ -77,12 +81,12 @@ $(function(){
           // 'control-point-distance': 100,
           'width': '3',
           // 'source-arrow-shape': 'triangle-backcurve',
-          // 'target-arrow-shape': 'triangle',
+          'target-arrow-shape': 'triangle',
           // 'mid-target-arrow-shape': 'triangle',
           // 'mid-source-arrow-shape': 'triangle-backcurve',
           // 'target-arrow-fill': 'filled',
           // 'source-arrow-shape': 'data(srcShape)',
-          'curve-style': 'haystack',
+          // 'curve-style': 'haystack',
           'opacity': 0.5
           //'content': 'data(weight)'
         })
@@ -100,6 +104,10 @@ $(function(){
           'mid-source-arrow-color': '#000',
           'mid-target-arrow-color': '#000'
         })
+      .selector('.foo')
+        .css({
+          'width': 15
+        })
       // .selector('#ae')
       //   .css({
       //     'curve-style': 'unbundled-bezier',
@@ -108,6 +116,7 @@ $(function(){
   ;
   
   window.options = {
+    boxSelectionEnabled: true,
     // hideEdgesOnViewport: true,
     // hideLabelsOnViewport: true,
     // textureOnViewport: true,
@@ -154,10 +163,6 @@ $(function(){
     }
   };
   
-  var cliques = 2;
-  var numNodes = 40;
-  var numEdges = 120;
-  
   function randNodeId( clique ){
     var min = numNodes * clique / cliques;
     var max = numNodes * (clique + 1) / cliques - (cliques == 1 ? 0 : 1);
diff --git a/src/extensions/renderer.canvas.coord-ele-math.js b/src/extensions/renderer.canvas.coord-ele-math.js
index f89bca0a97..1e8ccf3153 100644
--- a/src/extensions/renderer.canvas.coord-ele-math.js
+++ b/src/extensions/renderer.canvas.coord-ele-math.js
@@ -968,6 +968,9 @@
         var tgtH1 = rs.lastTgtCtlPtH;
         var tgtH2 = tgt.outerHeight();
 
+        var width1 = rs.lastW;
+        var width2 = eStyle['control-point-step-size'].pxValue;
+
         if( badBezier ){
           rs.badBezier = true;
         } else {
@@ -976,6 +979,7 @@
 
         if( srcX1 === srcX2 && srcY1 === srcY2 && srcW1 === srcW2 && srcH1 === srcH2
         &&  tgtX1 === tgtX2 && tgtY1 === tgtY2 && tgtW1 === tgtW2 && tgtH1 === tgtH2
+        &&  width1 === width2
         &&  ((edgeIndex1 === edgeIndex2 && numEdges1 === numEdges2) || edgeIsUnbundled) ){
           // console.log('edge ctrl pt cache HIT')
           continue; // then the control points haven't changed and we can skip calculating them
@@ -990,6 +994,7 @@
           rs.lastTgtCtlPtH = tgtH2;
           rs.lastEdgeIndex = edgeIndex2;
           rs.lastNumEdges = numEdges2;
+          rs.lastWidth = width2;
           // console.log('edge ctrl pt cache MISS')
         }