Gemeinsame JS - Wie ein Ereignis auf shapes.devs

Question

Ich bin neu mit Jointjs und ich versuche, ein Rechteck mit Ports zu einer Linie zu beschränken.

Ich versuchte tutorial zu reproduzieren, die mit einem basic.Circle, mit einem basic.Rect aber nicht mit devs.Model

Könnte jemand explian mich funktioniert, warum und wie dieses Problem zu lösen? Vielen Dank im Voraus!

Hier ist mein Code:

var width=400, height=1000; 

var ConstraintElementView = joint.dia.ElementView.extend({  
pointermove: function(evt, x, y) { 
    joint.dia.ElementView.prototype.pointermove.apply(this, [evt, 100, y]); 
} 
}); 

var graph = new joint.dia.Graph; 
var paper = new joint.dia.Paper({ el: $('#myholder'), width: width, height: height, gridSize: 1, model: graph, elementView: ConstraintElementView}); 

var m1 = new joint.shapes.devs.Model({ 
position: { x: 20, y: 20 }, 
size: { width: 90, height: 90 }, 
inPorts: [''], 
outPorts: [''], 
attrs: { 
    '.label': { text: 'Model', 'ref-x': .4, 'ref-y': .2 }, 
    rect: { fill: '#2ECC71' }, 
    '.inPorts circle': { fill: '#16A085' }, 
    '.outPorts circle': { fill: '#E74C3C' } 
} 
}); 

var m2=m1.clone(); 
m2.translate(0,300); 

var earth = new joint.shapes.basic.Circle({ 
position: { x: 100, y: 20 }, 
size: { width: 20, height: 20 }, 
attrs: { text: { text: 'earth' }, circle: { fill: '#2ECC71' } }, 
name: 'earth' 
}); 

graph.addCell([m1, m2, earth]); 

Answer 1

Warum funktioniert es nicht?

• devs.Model nicht über ContraintElementView auf das Papier gemacht.

• devs.Model verwendet devs.ModelView für das Rendering, basic.Circle und basic.Rect Verwendung ContraintElementView.

• JointJS dia.Paper sucht nach einer Ansicht, die im selben Namespace wie das Modell definiert ist. Wenn es gefunden wird, verwendet es es. Es verwendet eine aus dem Papier elementView Option sonst. das heißt joint.shapes.devs.ModelView für devs.Model gefunden, aber keine Aussicht für basic.Circle (keine joint.shapes.basic.RectView definiert) gefunden

Wie es funktioniert?

• definieren elementView Papieroption als eine Funktion. In diesem Fall durchsucht das Papier den Namespace nicht und verwendet das Ergebnis der Funktion zuerst.
• Beachten Sie, dass Ports devs.ModelView immer noch erforderlich ist, um zu rendern.

heißt

var paper = new joint.dia.Paper({ 
    elementView: function(model) { 
    if (model instanceof joint.shapes.devs.Model) { 
     // extend the ModelView with the constraining method. 
     return joint.shapes.devs.ModelView.extend({ 
     pointermove: function(evt, x, y) { 
      joint.dia.ElementView.prototype.pointermove.apply(this, [evt, 100, y]); 
     } 
     }); 
    } 
    return ConstraintElementView; 
    } 
}); 

http://jsfiddle.net/kumilingus/0bjqg4ow/

Was ist der empfohlene Weg, das zu tun?

• JointJS v0.9.7+
• nicht benutzerdefinierte Ansichten zu verwenden, die stattdessen Elemente Bewegung
• Verwendung restrictTranslate Papier Option einschränken.

, d.h.

var paper = new joint.dia.Paper({ 
    restrictTranslate: function(elementView) { 
    // returns an area the elementView can move around. 
    return { x: 100, y: 0, width: 0, height: 1000 } 
    }; 
}); 

http://jsfiddle.net/kumilingus/atbcujxr/

Answer 2

ich denke, das könnte Ihnen helfen: http://jointjs.com/demos/devs