Skip to content

Commit ef0ce41

Browse files
rappid-deployrappid-deploy
committed
add filters, gradients, transition and interpreter demos
1 parent 448270a commit ef0ce41

File tree

8 files changed

+479
-0
lines changed

8 files changed

+479
-0
lines changed

‎demo/filters.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf8"/>
5+
6+
<title>Filters</title>
7+
8+
<link rel="stylesheet" type="text/css" href="../dist/joint.css" />
9+
10+
<style>
11+
#paper {
12+
width: 600px;
13+
height: 300px;
14+
border: 1px solid gray;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
20+
<div id="paper"></div>
21+
22+
<script src="../lib/jquery.js"></script>
23+
<script src="../lib/jquery.sortElements.js"></script>
24+
<script src="../lib/lodash.js"></script>
25+
<script src="../lib/backbone.js"></script>
26+
27+
<script src="../src/core.js"></script>
28+
<script src="../src/vectorizer.js"></script>
29+
<script src="../src/geometry.js"></script>
30+
31+
32+
<script src="../src/joint.dia.graph.js"></script>
33+
34+
<script src="../src/joint.dia.cell.js"></script>
35+
<script src="../src/joint.dia.element.js"></script>
36+
<script src="../src/joint.dia.link.js"></script>
37+
<script src="../src/joint.dia.paper.js"></script>
38+
39+
<script src="../plugins/joint.shapes.basic.js"></script>
40+
41+
<script src="./filters.js"></script>
42+
43+
</body>
44+
</html>

‎demo/filters.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
var graph = new joint.dia.Graph;
2+
var paper = new joint.dia.Paper({ el: $('#paper'), width: 650, height: 400, gridSize: 1, model: graph });
3+
4+
var el = new joint.shapes.basic.Rect({
5+
position: { x: 0, y: 0 },
6+
size: { width: 100, height: 40 },
7+
attrs: {
8+
rect: { rx: 2, ry: 2, fill: '#2ECC71', stroke: '#27AE60', 'stroke-width': 2 },
9+
text: { 'font-size': 10, fill: '#333' }
10+
}
11+
});
12+
13+
var dropShadow = el.clone();
14+
dropShadow.translate(20, 20);
15+
dropShadow.attr('text/text', 'dropShadow(2,2,3)');
16+
dropShadow.attr('rect/filter', { name: 'dropShadow', args: { dx: 2, dy: 2, blur: 3 } });
17+
graph.addCell(dropShadow);
18+
19+
var blur = el.clone();
20+
blur.translate(150, 20);
21+
blur.attr('text/text', 'blur(5)');
22+
blur.attr('rect/filter', { name: 'blur', args: { x: 5 } });
23+
graph.addCell(blur);
24+
25+
var grayscale = el.clone();
26+
grayscale.translate(280, 20);
27+
grayscale.attr('text/text', 'grayscale(1)');
28+
grayscale.attr('rect/filter', { name: 'grayscale' });
29+
graph.addCell(grayscale);
30+
31+
var sepia = el.clone();
32+
sepia.translate(410, 20);
33+
sepia.attr('text/text', 'sepia(1)');
34+
sepia.attr('rect/filter', { name: 'sepia' });
35+
graph.addCell(sepia);
36+
37+
var saturate = el.clone();
38+
saturate.translate(20, 100);
39+
saturate.attr('text/text', 'saturate(.7)');
40+
saturate.attr('rect/filter', { name: 'saturate', args: { amount: .7 } });
41+
graph.addCell(saturate);
42+
43+
var hueRotate = el.clone();
44+
hueRotate.translate(150, 100);
45+
hueRotate.attr('text/text', 'hueRotate(50)');
46+
hueRotate.attr('rect/filter', { name: 'hueRotate', args: { angle: 50 } });
47+
graph.addCell(hueRotate);
48+
49+
var invert = el.clone();
50+
invert.translate(280, 100);
51+
invert.attr('text/text', 'invert(1)');
52+
invert.attr('rect/filter', { name: 'invert' });
53+
graph.addCell(invert);
54+
55+
var brightness = el.clone();
56+
brightness.translate(410, 100);
57+
brightness.attr('text/text', 'brightness(.7)');
58+
brightness.attr('rect/filter', { name: 'brightness', args: { amount: .7 } });
59+
graph.addCell(brightness);
60+
61+
var contrast = el.clone();
62+
contrast.translate(20, 180);
63+
contrast.attr('text/text', 'contrast(.5)');
64+
contrast.attr('rect/filter', { name: 'contrast', args: { amount: .5 } });
65+
graph.addCell(contrast);
66+

‎demo/gradients.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf8"/>
5+
6+
<title>Gradients</title>
7+
8+
<link rel="stylesheet" type="text/css" href="../dist/joint.css" />
9+
10+
<style>
11+
#paper {
12+
width: 600px;
13+
height: 300px;
14+
border: 1px solid gray;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
20+
<div id="paper"></div>
21+
22+
<script src="../lib/jquery.js"></script>
23+
<script src="../lib/jquery.sortElements.js"></script>
24+
<script src="../lib/lodash.js"></script>
25+
<script src="../lib/backbone.js"></script>
26+
27+
<script src="../src/core.js"></script>
28+
<script src="../src/vectorizer.js"></script>
29+
<script src="../src/geometry.js"></script>
30+
31+
32+
<script src="../src/joint.dia.graph.js"></script>
33+
34+
<script src="../src/joint.dia.cell.js"></script>
35+
<script src="../src/joint.dia.element.js"></script>
36+
<script src="../src/joint.dia.link.js"></script>
37+
<script src="../src/joint.dia.paper.js"></script>
38+
39+
<script src="../plugins/joint.shapes.basic.js"></script>
40+
41+
<script src="./gradients.js"></script>
42+
43+
</body>
44+
</html>

‎demo/gradients.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
var graph = new joint.dia.Graph;
2+
var paper = new joint.dia.Paper({ el: $('#paper'), width: 650, height: 400, gridSize: 1, model: graph });
3+
4+
var el = new joint.shapes.basic.Rect({
5+
position: { x: 0, y: 0 },
6+
size: { width: 200, height: 100 },
7+
attrs: {
8+
rect: { rx: 2, ry: 2, fill: '#2ECC71', stroke: 'black', 'stroke-width': 20 },
9+
text: { 'font-size': 15, fill: '#333' }
10+
}
11+
});
12+
13+
var el1 = el.clone();
14+
el1.translate(20, 20);
15+
el1.attr('text/text', 'linearGradient\n(both fill and stroke)');
16+
el1.attr('rect/fill', {
17+
type: 'linearGradient',
18+
stops: [
19+
{ offset: '0%', color: '#E67E22' },
20+
{ offset: '20%', color: '#D35400' },
21+
{ offset: '40%', color: '#E74C3C' },
22+
{ offset: '60%', color: '#C0392B' },
23+
{ offset: '80%', color: '#F39C12' }
24+
]
25+
});
26+
el1.attr('rect/stroke', {
27+
type: 'linearGradient',
28+
stops: [
29+
{ offset: '0%', color: '#3498DB' },
30+
{ offset: '50%', color: '#9B59B6' }
31+
]
32+
});
33+
el1.attr('rect/filter', { name: 'dropShadow', args: { dx: 2, dy: 2, blur: 3 } });
34+
graph.addCell(el1);
35+
36+
37+
var el2 = el.clone();
38+
el2.translate(300, 20);
39+
el2.attr('text/text', 'radialGradient\n(both fill and stroke)');
40+
el2.attr('rect/fill', {
41+
type: 'radialGradient',
42+
stops: [
43+
{ offset: '0%', color: '#E67E22' },
44+
{ offset: '20%', color: '#D35400' },
45+
{ offset: '40%', color: '#E74C3C' },
46+
{ offset: '60%', color: '#C0392B' },
47+
{ offset: '80%', color: '#F39C12' }
48+
]
49+
});
50+
el2.attr('rect/stroke', {
51+
type: 'radialGradient',
52+
stops: [
53+
{ offset: '95%', color: '#3498DB' },
54+
{ offset: '98%', color: '#9B59B6' }
55+
]
56+
});
57+
graph.addCell(el2);

‎demo/interpreter.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf8"/>
5+
6+
<title>Interpreter</title>
7+
8+
<link rel="stylesheet" type="text/css" href="../dist/joint.css" />
9+
<link rel="stylesheet" type="text/css" href="../dist/joint.ui.halo.css" />
10+
11+
<style>
12+
html, body { margin: 0; padding: 0 }
13+
#paper {
14+
width: 850px;
15+
height: 600px;
16+
border: 1px solid gray;
17+
}
18+
</style>
19+
</head>
20+
<body>
21+
22+
<div id="paper"></div>
23+
24+
<p>
25+
Click an element to trigger a signal on it.
26+
</p>
27+
28+
<script src="../lib/jquery.js"></script>
29+
<script src="../lib/jquery.sortElements.js"></script>
30+
<script src="../lib/lodash.js"></script>
31+
<script src="../lib/backbone.js"></script>
32+
33+
<script src="../src/core.js"></script>
34+
<script src="../src/vectorizer.js"></script>
35+
<script src="../src/geometry.js"></script>
36+
37+
38+
<script src="../src/joint.dia.graph.js"></script>
39+
40+
<script src="../src/joint.dia.cell.js"></script>
41+
<script src="../src/joint.dia.element.js"></script>
42+
<script src="../src/joint.dia.link.js"></script>
43+
<script src="../src/joint.dia.paper.js"></script>
44+
45+
<script src="../dist/joint.ui.halo.js"></script>
46+
47+
<script src="../plugins/joint.shapes.basic.js"></script>
48+
49+
<script src="./interpreter.js"></script>
50+
51+
</body>
52+
</html>

‎demo/interpreter.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
var graph = new joint.dia.Graph;
2+
var paper = new joint.dia.Paper({
3+
el: $('#paper'), width: 850, height: 600, model: graph, gridSize: 1,
4+
defaultLink: new joint.dia.Link({
5+
attrs: {
6+
// @TODO: scale(0) fails in Firefox
7+
'.marker-source': { d: 'M 10 0 L 0 5 L 10 10 z', transform: 'scale(0.001)' },
8+
'.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' }
9+
}
10+
})
11+
});
12+
13+
var a = new joint.shapes.basic.Rect({ position: { x: 50, y: 50 }, size: { width: 100, height: 40 }, attrs: { text: { text: 'A' } } });
14+
var b = new joint.shapes.basic.Rect({ position: { x: 250, y: 50 }, size: { width: 100, height: 40 }, attrs: { text: { text: 'B' } } });
15+
var c = new joint.shapes.basic.Rect({ position: { x: 350, y: 150 }, size: { width: 100, height: 40 }, attrs: { text: { text: 'C' } } });
16+
17+
graph.addCells([a, b, c]);
18+
19+
var l1 = new joint.dia.Link({
20+
source: { id: a.id }, target: { id: b.id },
21+
attrs: {
22+
// @TODO: scale(0) fails in Firefox
23+
'.marker-source': { d: 'M 10 0 L 0 5 L 10 10 z', transform: 'scale(0.001)' },
24+
'.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' }
25+
}
26+
});
27+
var l2 = new joint.dia.Link({
28+
source: { id: b.id }, target: { id: c.id },
29+
attrs: {
30+
// @TODO: scale(0) fails in Firefox
31+
'.marker-source': { d: 'M 10 0 L 0 5 L 10 10 z', transform: 'scale(0.001)' },
32+
'.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' }
33+
}
34+
35+
});
36+
37+
graph.addCells([l1, l2]);
38+
39+
// Trigger signaling on element click.
40+
paper.on('cell:pointerdown', function(cellView) {
41+
42+
cellView.model.trigger('signal', cellView.model);
43+
44+
var halo = new joint.ui.Halo({ graph: graph, paper: paper, cellView: cellView });
45+
halo.render();
46+
});
47+
48+
49+
50+
// Signaling.
51+
// ----------
52+
53+
graph.on('signal', function(cell, data) {
54+
55+
if (cell instanceof joint.dia.Link) {
56+
57+
var targetCell = graph.getCell(cell.get('target').id);
58+
sendToken(cell, 1, function() {
59+
60+
targetCell.trigger('signal', targetCell);
61+
});
62+
63+
} else {
64+
65+
flash(cell);
66+
var outboundLinks = graph.getConnectedLinks(cell, { outbound: true });
67+
_.each(outboundLinks, function(link) {
68+
link.trigger('signal', link);
69+
});
70+
}
71+
});
72+
73+
function flash(cell) {
74+
75+
var cellView = paper.findViewByModel(cell);
76+
cellView.highlight();
77+
_.delay(function() { cellView.unhighlight(); }, 200);
78+
}
79+
80+
function sendToken(link, sec, callback) {
81+
82+
var token = V('circle', { r: 7, fill: 'green' });
83+
84+
$(paper.viewport).append(token.node);
85+
token.animateAlongPath({ dur: sec + 's', repeatCount: 1 }, paper.findViewByModel(link).$('.connection')[0]);
86+
87+
_.delay(function() {
88+
token.remove();
89+
callback();
90+
}, sec * 1000);
91+
}

0 commit comments

Comments
 (0)