местоположение конечной точки не обновляется в jsPlumb resize

Question

Я пытаюсь реализовать редактор блок-схем, используя jsPlumb, и это мой первый раз, когда я использую его. У меня есть квадратный элемент (который также перетаскивается), и когда я пытаюсь изменить его размер, конечные точки не перемещаются (см. 1). Здесь я использую jsPlumb-2.0.7.js.

Когда я использовал jquery.jsPlumb-1.4.1-all-min.js, конечные точки перемещаются по мере изменения размера элемента. Но есть некоторые проблемы в конечных точках элемента формы алмаза в редакторе (см. 2). Я применил этот алмазный элемент, повернув квадратный элемент на 45 градусов.

Вот как я делаю элементы повторно значительные:

function makeResizable(classname){ 
    $(classname).resizable({ 
     resize : function(event, ui) { 
      jsPlumb.repaint(ui.helper); 
     } 
    }); 
} 

Это мой источник конечной точки:

var connectorPaintStyle = { 
    lineWidth: 4, 
    strokeStyle: "#61B7CF", 
    joinstyle: "round", 
    outlineColor: "white", 
    outlineWidth: 2 
}, 
connectorHoverStyle = { 
    lineWidth: 4, 
    strokeStyle: "#216477", 
    outlineWidth: 2, 
    outlineColor: "white" 
}, 
endpointHoverStyle = { 
    fillStyle: "#216477", 
    strokeStyle: "#216477" 
}, 
sourceEndpoint = { 
     endpoint: "Dot", 
     paintStyle: { 
      strokeStyle: "#7AB02C", 
      fillStyle: "transparent", 
      radius: 7, 
      lineWidth: 3 
     }, 
     isSource: true, 
     connector: [ "Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true } ], 
     connectorStyle: connectorPaintStyle, 
     hoverPaintStyle: endpointHoverStyle, 
     connectorHoverStyle: connectorHoverStyle, 
     maxConnections: -1, 
     dragOptions: {}, 
     overlays: [ 
      [ "Label", { 
       location: [0.5, 1.5], 
       label: "Drag", 
       cssClass: "endpointSourceLabel", 
       visible:false 
      } ] 
     ] 
    }; 

Это моя цель конечная точка:

targetEndpoint = { 
     endpoint: "Dot", 
     paintStyle: { fillStyle: "#7AB02C", radius: 11 }, 
     hoverPaintStyle: endpointHoverStyle, 
     maxConnections: -1, 
     dropOptions: { hoverClass: "hover", activeClass: "active" }, 
     isTarget: true, 
     overlays: [ 
      [ "Label", { location: [0.5, -0.5], label: "Drop", cssClass: "endpointTargetLabel", visible:false } ] 
     ] 
    } 

Я использую метод jsPlumb.addEndpoint() для добавления конечных точек. Я искал помощь, но не нашел подходящего ответа. Может ли кто-нибудь решить проблему?

Answer 1

Я отправляю это как ответ, потому что он решил мою проблему! Я использовал самую последнюю версию jsPlumb-2.0.7.js и создал экземпляр jsPlumb.

var instance = jsPlumb.getInstance({/*Drag options and connection overlays*/}); 

Тогда я использовал эту instance, чтобы элементы перетаскивать и изменяемыми.

А также, вместо использования instance.repaint(ui.helper) Я использовал instance.revalidate(ui.helper) в пределах изменяемой размер функции. Тогда это отлично сработало!