I use Ports API and JointJS 2.0. The problem is that i created ports, but they are not active. Port just become part of rect. I can't drag a link from it. Sorry, but i can't setup fiddle link with joint 2.0. I have "joint is not defined" in console.
Here is code:
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 200,
model: graph,
gridSize: 1
});
var port = {
args: {},
markup: '<rect width="10" height="10" stroke="red"/>'
};
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } },
ports: {
groups: {},
items: [ port ]
}
});
graph.addCells([rect]);
Here is jsfiddle with old joint
Related
I have created a DrawContainer and I want to add a sprite with a tooltip to it, ideally with dynamic content. Unfortunately, the tooltip does not appear at all. How can the code below be corrected?
Thanks in advance.
var r = this.getSurface().add({
type: "rect", strokeStyle: "#9090f0", x: 10, y: 10, width: 40, height: 40
});
var tip = Ext.create('Ext.tip.ToolTip', {
html: "Tooltip"
});
r.on("mouseover", function() {
tip.show();
});
You could try using spriteevents plugin on the draw container, like so
var tip = Ext.create('Ext.tip.ToolTip', {
html: "Tooltip"
});
var s = Ext.create({
xtype: 'draw',
renderTo: document.body,
width: 400,
height: 400,
plugins: ['spriteevents'],
sprites: [
{
type: "rect",
strokeStyle: "#9090f0",
x: 10,
y: 10,
width: 100,
height: 100
}
],
listeners: {
spritemouseover: function (item, event) {
tip.show();
},
spritemouseout: function (item, event) {
tip.hide()
}
}
});
I'm trying to create graph using JointJS, where Link starts from output port od 1 element and can be connected with whole other element (or current element itself) - not only with input port.
My idea is to modify input port style, to cover element it belongs to, but I have problems to change port shape in any way, it's always a little circle on left side of element and none of my css works.
Can someone give any advice?
you can update the port attrib0utes as follows:
var a = new joint.shapes.devs.Model({
position: { x: 50, y: 50 },
size: { width: 100, height: 100 },
attrs: {
'.port-label': {
fill: 'red'
},
// change position and size of the 'a' port
'.inPorts .port0 circle': {
r: 15,
'ref-x': -20,
'ref-y': 10,
stroke: 'red',
'stroke-width': 5
},
// change color on a single port
'.inPorts .port0 .port-label': {
fill: 'blue',
}
},
inPorts: ['a', 'aa', 'aaa'],
outPorts: ['b']
https://jsfiddle.net/vtalas/43sthc6g/
However, you don't need to use ports to achieve this, you can connect to the whole element directly like this:
var a = new joint.shapes.basic.Rect({
size: { width: 100, height: 100 },
position: { x: 300, y: 300 },
attrs: {
'rect': { magnet: true }
}
}).addTo(graph);
var b = new joint.shapes.basic.Rect({
size: { width: 100, height: 100 },
position: { x: 100, y: 100 },
attrs: {
'rect': { magnet: true }
}
}).addTo(graph);
new joint.dia.Link({ source: { id: b.id }, target: { id: a.id } }).addTo(graph);
result: https://jsfiddle.net/vtalas/davLzsng/
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]);
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/
I think this could help you :
http://jointjs.com/demos/devs
I have an FSA in joint.js, and I need to make the states (circles) semi-filled to specific ratios, like 1/2 or 1/6, starting from the bottom of the circle. The tricky part is that it needs to be done twice - A larger semi-fill and a smaller semi-fill over it.
This is what i am trying to do:
I'm lost as to how to accomplish this.
The trick is to create three SVG circles and define clip paths for them. The following example creates a custom JointJS shape (inheriting from fsa.State) with custom SVG markup that enables the coloring that you have shown in the image:
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({ el: $('#paper'), width: 650, height: 400, model: graph });
joint.shapes.fsa.MyState = joint.shapes.fsa.State.extend({
markup: [
'<g class="rotatable"><g class="scalable">',
'<clipPath id="clip-top1"><rect x="-30" y="0" width="60" height="30"/></clipPath>',
'<clipPath id="clip-top2"><rect x="-30" y="15" width="60" height="30"/></clipPath>',
'<circle class="a"/><circle class="b"/><circle class="c"/>',
'</g><text/></g>'
].join(''),
defaults: joint.util.deepSupplement({
type: 'fsa.MyState',
size: { width: 60, height: 60 },
attrs: {
'circle': { fill: 'white' },
'.b': { fill: 'red', 'clip-path': 'url(#clip-top1)' },
'.c': { fill: 'blue', 'clip-path': 'url(#clip-top2)' }
}
}, joint.shapes.fsa.State.prototype.defaults)
});
var mystate1 = new joint.shapes.fsa.MyState({
position: { x: 50, y: 50 },
size: { width: 100, height: 100 },
attrs: { text: { text: 'my state 1' } }
});
graph.addCell(mystate1);
var mystate2 = new joint.shapes.fsa.MyState({
position: { x: 50, y: 160 },
size: { width: 50, height: 50 }
});
graph.addCell(mystate2);
I want to code an app that simply puts a rectangle on the screen. But I need to combine kinetic.js and backbone.js for this and i am not sure it can be done.
Kinetic code is:
document.getElementById('rect').addEventListener('click', function() {
rect = new Kinetic.Rect({
x: 239,
y: 75,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
offset: [50,25],
draggable: true,
});
And backbone code
$(function() {
var Shape = Backbone.Model.extend({
defaults: { x:50, y:50, width:150, height:150, color:'gray' },
setTopLeft: function(x,y) { this.set({ x:x, y:y }); },
setDim: function(w,h) { this.set({ width:w, height:h }); },
isCircle: function() { return !!this.get('circle'); }
});
*I added .html file these paths
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.3.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.2/underscore-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js"></script>
All i want to place kinetic part instead of default values in backbone. Is it possible?
With your help, we wrote this example of work which puts a rectangle on the screen using both kinetic.js and backbone.js. I wish it would be useful for who is looking for this kind of integrated code.
Thanks a lot for your help!
var KineticModel = Backbone.Model.extend({
myRect: null,
createRect : function() {
alert("rectangle created.");
var rect=new Kinetic.Rect({
x: 10,
y: 10,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 1,
offset: [0, 0],
draggable: true,
});
return rect;
}
});
var KineticView = Backbone.View.extend({
tagName: 'span',
stage: null,
layer: null,
initialize: function (options) {
model: options.model;
el: options.el;
this.layer = new Kinetic.Layer();
this.stage = new Kinetic.Stage({ container: this.el, width: 400, height: 400 });
this.stage.add(this.layer);
},
events: {
'click': 'spanClicked'
},
render: function () {
var rect = this.model.createRect();
this.layer.add(rect);
this.stage.add(this.layer);
alert("render");
},
spanClicked: function () {
}
});
var kModel = new KineticModel({});
var kView = new KineticView({ el: '#container', model: kModel });
$('#shapetest').click(function() {
kView.render();
});
Yes this is definitely possible. I would just create a model that stores the data that you will be using in your shape, use a view to render a span tag with click me, attach an event listener to the span and then output the rectangle when the user clicks.
var ShapeModel = Backbone.Model.extend({});
var rectangle = new ShapeModel({
x: 10,
y: 10,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
offset: [0, 0],
draggable: true,
});
var RectangleView = Backbone.View.extend({
tagName: 'span',
initialize: function (options) {
model: options.model;
el: options.el;
},
events: {
'click': 'spanClicked'
},
render: function () {
this.$el.text('click me');
},
spanClicked: function () {
var stage = new Kinetic.Stage({
container: this.el,
width: 200,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect(this.model.toJSON());
layer.add(rect);
stage.add(layer);
}
});
var rectangleView = new RectangleView({ el: '#shapetest', model: rectangle });
rectangleView.render();
I would upgrade to the latest version of Backbone and Underscore too.
Also, thanks for pointing out Kinetic. Hopefully it has support for drawing on the canvas on a mobile device.