CODEWITHSUNDEEP
javascriptconstraintsjointjs
Pierre GUILLAUME
Pierre GUILLAUME

Reputation: 449

Joint JS - How apply an event on shapes.devs

I'm new with jointjs and I try to constraint a rectangle with ports to a line.

I tried to reproduce tutorial, that works with a basic.Circle, with a basic.Rect but not with devs.Model

Could someone explian me why and how to solve this problem? Many thanks in advance!

Here is my 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]);

Upvotes: 3

Views: 1228

Answers (2)

Roman
Roman

Reputation: 1674

Why does it not work?

  • devs.Model is not rendered via ContraintElementView to the paper.

  • devs.Model uses devs.ModelView for rendering, basic.Circle and basic.Rect use ContraintElementView.

  • JointJS dia.Paper searches for a view defined in the same namespace as the model first. If found, it uses it. It uses one from the paper elementView option otherwise. i.e. joint.shapes.devs.ModelView found for devs.Model but no view found for basic.Circle (no joint.shapes.basic.RectView is defined)

How to make it work?

  • define elementView paper option as a function. In that case paper don't search the namespace and uses the result of the function first.
  • Note that in order to render ports devs.ModelView is still required.

i.e.

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/

What is the recommended way to do that?

  • JointJS v0.9.7+
  • not to use custom views that restrict elements movement
  • use restrictTranslate paper option instead.

i.e.

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/

Upvotes: 2

jsanchezs
jsanchezs

Reputation: 2070

I think this could help you : http://jointjs.com/demos/devs

Upvotes: 0

Related Questions