JsPlumb Comment changer le style de connexion par défaut en pointillé?

Question

Habituellement, le style de peinture par défaut peut être initialisé dans la méthode ready de jsPlumb. Le style de ligne de connecteur est solide, mais dans certains cas, l'utilisateur espère le changer en style pointillé. Tout d'abord, le solide est créé et rendu sur la page, puis le style sera changé en style pointillé lorsqu'un événement est déclenché.

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 }]] 
    }; 

J'ai essayé d'utiliser setPaintStyle de connexion() et setPaintStyle de point final, mais pas de la manière souhaitée. Après l'appel de la méthode, la ligne sera vide, sauf si elle est cliquée une fois, puis devient un style en pointillés.

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

La méthode setPaintStyle de connexion est appelée et le connecteur est vide.

connection.setPaintStyle(dashedType); 

Lorsque la souris une fois cliqué, le connecteur passe au tableau de bord.

Answer 1

travail ont essayé deux jours, il y a une solution. Pour utiliser le noeud final connectorStyle plutôt que le style de connexion, il doit appeler la méthode repaint de l'élément après le paramètre dashstyle. Le code complet est ici:

// le varibale élément est le nœud de la passerelle

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