Ändern JointJS Port Farbe dynamisch

Question

Ich bin auf der Suche nach der Port-Farben in einem JointJS-Diagramm auf der Grundlage einiger externer Daten ändern, sobald das Diagramm erstellt wurde.

Ich habe den folgenden Code versucht:

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

wo 'in1' ist die ID meines Port, die ich ändern müssen.

Das ist mein gemeinsames Objekt:

{ 
    "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 
    } 
    } 
} 

Leider werden folgende Fehler Ich erhalte:

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 

den gemeinsamen js Bibliothek Code Graben in, es ist wie diese Funktion aussieht, ist der Täter (in der joint.js-Datei):

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

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

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

} 

Als ich this.prop('ports/items') console.log, es ist unde bestraft.

Hat jemand irgendwelche Gedanken?

Answer 1

haben Sie versucht element.getPort (‚in1‘) zu verwenden das Element mit der ID zurückzukehren und sie ließen die prop Sie wollen?

auch versuchen, die Liste aller Ports zu bekommen, nur um zu debuggen, dass alles richtig eingestellt ist.

Überprüfen Sie auch mit dem Debugger, dass der Port die ID richtig gesetzt bekommt. Die Art und Weise, wie Sie die Ports einstellen, erscheint mir etwas seltsam. Aber solange Sie das Element mit der richtigen ID erhalten können, können Sie seine Eigenschaften festlegen.

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

Sie können das element.portProp(portId, path, value)

Demo: http://codepen.io/vladimirtalas/pen/PpoYaX

docs: http://resources.jointjs.com/docs/jointjs/v1.0/joint.html#dia.Element.prototype.portProp