JsPlumb接続スタイルをデフォルトから破線に変更するにはどうすればよいですか？

Question

通常、デフォルトのペイントスタイルは、jsPlumbのreadyメソッドで初期化できます。コネクタの線のスタイルは堅実ですが、場合によっては、ユーザーは破線のスタイルに変更したいと考えています。まず、ソリッド1が作成され、ページ上にレンダリングされ、イベントがトリガされたときにスタイルが破線のスタイルに変更されます。

var connectorType = ["Flowchart", { stub: [2, 2], gap: 1, cornerRadius: 5, alwaysRespectStubs: true }] 
    , 
    connectorPaintStyle = { 
     strokeWidth: 2, 
     stroke: "#61B7CF", 
     joinstyle: "round", 
     outlineStroke: "white", 
     outlineWidth: 2, 
     //dashstyle: "2 4" 
    }, 
    connectorHoverStyle = { 
     strokeWidth: 3, 
     stroke: "#216477", 
     outlineWidth: 5, 
     outlineStroke: "white" 
    }, 
    endpointHoverStyle = { 
     fill: "#216477", 
     stroke: "#216477" 
    }, 
    sourceEndpoint = { 
     endpoint: "Dot", 
     paintStyle: { 
      stroke: "#7AB02C", 
      fill: "transparent", 
      radius: 4, 
      strokeWidth: 1 
     }, 
     isSource: true, 
     connector: connectorType, 
     connectorStyle: connectorPaintStyle, 
     hoverPaintStyle: endpointHoverStyle, 
     connectorHoverStyle: connectorHoverStyle, 
     maxConnections: 100,      //the limition of max connections 
     dragOptions: {}, 
     overlays: [ 
      ["Label", { 
       location: [0.5, 1.5], 
       label: "Drag", 
       cssClass: "endpointSourceLabel", 
       visible: false 
       } 
      ] 
     ] 
    }, 
    targetEndpoint = { 
     endpoint: "Dot", 
     paintStyle: { fill: "#7AB02C", radius: 4 }, 
     hoverPaintStyle: endpointHoverStyle, 
     maxConnections: -1, 
     dragOptions: { hoverClass: "hover", activeClass: "active" }, 
     isTarget: true, 
     overlays: [["Label", { location: [0.5, -0.5], label: "Drop", cssClass: "endpointTargetLabel", visible: false }]] 
    }; 

は

私は、接続setPaintStyle（）およびエンドポイントsetPaintStyleを使用しようとしましたが、それは所望の方法ではありません。メソッドが呼び出された後、一度クリックされない限り線は空白になり、点線のスタイルになります。

var dashedType = { 
     connector: "StateMachine", 
     paintStyle: { stroke: "red", strokeWidth: 4 }, 
     hoverPaintStyle: { stroke: "blue" }, 
     dashstyle: "2 4" 
    }; 

接続setPaintStyleメソッドが呼び出され、コネクタが空白になります。

connection.setPaintStyle(dashedType); 

マウスを一度クリックすると、コネクターはダッシュに変更されます。

Answer 1

は解決策があり、2日の仕事を試してみました。接続スタイルではなく、エンドポイントconnectorStyleを使用するには、set dashstyleの後にelement repaintメソッドを呼び出す必要があります。完全なコードはここにある：

//要素varibaleは、ゲートウェイノードに

 instance.selectEndpoints({ source: element }).each(function (endpoint) { 
      endpoint.connectorStyle.dashstyle = "2 4"; 
      instance.repaint(element); 
     });