Динамическое изменение цвета порта JS

Question

Я хочу изменить цвета портов в графе JointJS на основе некоторых внешних данных после создания графика.

Я попытался следующий код:

var l_portsIn = this.model.get('inPorts'); 
if (l_portsIn.length > 0){ 
    this.portProp ('in1','attrs/rect',{stroke: 'red' }); 
} 

где «in1» является идентификатором моего порта, который нужно изменить.

Это мой совместный объект:

{ 
    "type": "html.Element", 
    "inPorts": [ 
    "in1", 
    "in2", 
    "in3", 
    "in4", 
    "in5" 
    ], 
    "outPorts": [ 
    "out1", 
    "out2", 
    "out3", 
    "out4", 
    "out5" 
    ], 
    "position": { 
    "x": 600, 
    "y": 500 
    }, 
    "size": { 
    "width": 170, 
    "height": 100 
    }, 
    "angle": 0, 
    "label": "Test step #2.", 
    "id": "0d29c814-88d7-4429-9d62-c68537098739", 
    "z": 2, 
    "attrs": { 
    ".label": { 
     "text": "Test step #2.", 
     "ref-x": 0.5, 
     "ref-y": 0.4 
    }, 
    ".inPorts>.port0>circle": { 
     "port": { 
     "id": "in1", 
     "type": "in" 
     } 
    }, 
    ".inPorts>.port0": { 
     "ref": "rect", 
     "ref-x": 0.1 
    }, 
    ".inPorts>.port1>circle": { 
     "port": { 
     "id": "in2", 
     "type": "in" 
     } 
    }, 
    ".inPorts>.port1": { 
     "ref": "rect", 
     "ref-x": 0.30000000000000004 
    }, 
    ".inPorts>.port2>circle": { 
     "port": { 
     "id": "in3", 
     "type": "in" 
     } 
    }, 
    ".inPorts>.port2": { 
     "ref": "rect", 
     "ref-x": 0.5 
    }, 
    ".inPorts>.port3>circle": { 
     "port": { 
     "id": "in4", 
     "type": "in" 
     } 
    }, 
    ".inPorts>.port3": { 
     "ref": "rect", 
     "ref-x": 0.7000000000000001 
    }, 
    ".inPorts>.port4>circle": { 
     "port": { 
     "id": "in5", 
     "type": "in" 
     } 
    }, 
    ".inPorts>.port4": { 
     "ref": "rect", 
     "ref-x": 0.9 
    }, 
    ".outPorts>.port0>circle": { 
     "port": { 
     "id": "out1", 
     "type": "out" 
     } 
    }, 
    ".outPorts>.port0": { 
     "ref": "rect", 
     "ref-x": 0.1, 
     "ref-dy": 0 
    }, 
    ".outPorts>.port1>circle": { 
     "port": { 
     "id": "out2", 
     "type": "out" 
     } 
    }, 
    ".outPorts>.port1": { 
     "ref": "rect", 
     "ref-x": 0.30000000000000004, 
     "ref-dy": 0 
    }, 
    ".outPorts>.port2>circle": { 
     "port": { 
     "id": "out3", 
     "type": "out" 
     } 
    }, 
    ".outPorts>.port2": { 
     "ref": "rect", 
     "ref-x": 0.5, 
     "ref-dy": 0 
    }, 
    ".outPorts>.port3>circle": { 
     "port": { 
     "id": "out4", 
     "type": "out" 
     } 
    }, 
    ".outPorts>.port3": { 
     "ref": "rect", 
     "ref-x": 0.7000000000000001, 
     "ref-dy": 0 
    }, 
    ".outPorts>.port4>circle": { 
     "port": { 
     "id": "out5", 
     "type": "out" 
     } 
    }, 
    ".outPorts>.port4": { 
     "ref": "rect", 
     "ref-x": 0.9, 
     "ref-dy": 0 
    } 
    } 
} 

К сожалению, я получаю следующее сообщение об ошибке:

joint.js:10852 Uncaught Error: Element: unable to find port with id in1 
    at n.portProp (https://localhost:8000/libs/joint/joint.js:10852:23) 
    at n.modifyPortColor (https://localhost:8000/editor.js:759:16) 
    at https://localhost:8000/editor.js:106:21 
    at Array.forEach (native) 
    at https://localhost:8000/editor.js:104:17 
    at Array.forEach (native) 
    at HTMLDocument.<anonymous> (https://localhost:8000/editor.js:91:20) 
    at j (https://localhost:8000/javascripts/lib/jquery/jquery.min.js:2:27309) 
    at Object.fireWith [as resolveWith] (https://localhost:8000/javascripts/lib/jquery/jquery.min.js:2:28122) 
    at Function.ready (https://localhost:8000/javascripts/lib/jquery/jquery.min.js:2:29956) 
    at HTMLDocument.J (https://localhost:8000/javascripts/lib/jquery/jquery.min.js:2:30322) 
portProp @ joint.js:10852 
modifyPortColor @ editor.js:759 
(anonymous) @ editor.js:106 
(anonymous) @ editor.js:104 
(anonymous) @ editor.js:91 
j @ jquery.min.js:2 
fireWith @ jquery.min.js:2 
ready @ jquery.min.js:2 
J @ jquery.min.js:2 

копания в совместную библиотеку JS кода, это выглядит как эта функция является виновником (в joint.js файле):

getPortIndex: function(port) { 
    var id = _.isObject(port) ? port.id : port; 

    if (!this._isValidPortId(id)) { 
     return -1; 
    } 

    return _.findIndex(this.prop('ports/items'), { id: id }); 

} 

Когда я console.log this.prop('ports/items'), это недеформированной оштрафован.

У кого-нибудь есть мысли?

Answer 1

Вы пытались использовать element.getPort ('in1'), чтобы вернуть элемент с идентификатором, и они установили опору, которую вы хотите?

также попытайтесь получить список всех портов только для отладки, что все правильно установлено.

Также проверьте с помощью отладчика, что порт правильно установил идентификатор. то, как вы устанавливаете порты, кажется мне немного странным. Но до тех пор, пока вы можете получить элемент с правильным идентификатором, вы можете установить его приличия.

updateNode: function() { 
     var currentGraph = this.graph; 

     _.each(currentGraph.getElements(), function (node) { 
      if (node.attributes.type === 'shape.Circle') { 
       node.attr('text/text', getRandomIntInclusive(1, 10).toString()); 
      } 
     } 

Answer 2

Вы можете использовать element.portProp(portId, path, value)

демо: http://codepen.io/vladimirtalas/pen/PpoYaX

Документах http://resources.jointjs.com/docs/jointjs/v1.0/joint.html#dia.Element.prototype.portProp